动态创建 <mat-error> 组件并将其正确投影到父 <mat-form-field> 组件中

Question

使用ComponentFactoryResolver 动态创建组件很简单，但是当我尝试对<mat-form-field> 中的Angular Material <mat-error> 组件执行此操作时，它似乎不会将创建的组件投影到父组件中.我一直在使用 Netanel Basal 的 example 和 Bootstrap 组件，它非常适合生成表单控制错误，但由于 Angular Material 中使用 <mat-error> 的内容投影，我似乎无法让它适用于 Angular Material v8.2.1.

是否可以在<mat-form-field> 中动态创建<mat-error> 并使其内容项目正确？

Answer 1

我之前尝试过这个 - MatFormField 通过 ContentChildren 接收 MatErrors。因为它是内容投影，所以动态添加或删除像MatError 这样的元素是行不通的——内容模板的编译和处理方式与其他模板不同。

您在评论中提到您正在尝试跨模板处理一致的错误消息...为什么不添加一个 directive 到 <mat-error> 元素来控制基于以下的错误消息父控件的表单验证状态？

但是，如果您希望控制模板，则不能使用指令。但是，您可以创建一个组件并像指令一样使用它：

@Component({
  selector: '[matErrorMessages]',
  template: '{{ error }}'
})
export class MatErrorMessagesDirective implements AfterViewInit {
  
  public error = '';
  private inputRef: MatFormFieldControl<MatInput>;

  constructor(private _inj: Injector) { }

  public ngAfterViewInit() {
    // grab reference to MatFormField directive, where form control is accessible.
    let container = this._inj.get(MatFormField);
    this.inputRef = container._control;

    // sub to the control's status stream
    this.inputRef.ngControl.statusChanges.subscribe(this.updateErrors);
  }


  private updateErrors = (state: 'VALID' | 'INVALID') => {
    if (state === 'INVALID') {
      // active errors on the FormControl
      let controlErrors = this.inputRef.ngControl.errors;

      // just grab one error
      const firstError = Object.keys(controlErrors)[0];
      
      if(firstError === 'required')
        this.error = 'This field is required.';
 
      if(firstError === 'minlength')
        this.error = 'This field should be longer.';

      if(firstError === 'error from my own custom validator')
        this.error = 'You get the point.';
      // ..... 
    }
  }

然后在模板中......

<mat-error matErrorMessages></mat-error>

这样，您可以让MatFormField 控制MatError 的存在，就像它应该做的那样，但是您以本地化、干净的方式控制错误元素的内容。

上面的stackblitz：https://stackblitz.com/edit/angular-sjkfft

您必须深入研究 Material 组件的私有成员，这是有问题的做法，并且可能会因库更新而中断，但它确实有效。

我实际上有一个针对这种类型的错误消息的存储库，它是为更旧版本的@angular/material 编写的，但我也能够获取Validator 本身以获得更好的错误消息，并且是将该验证器的整个自定义验证器/错误列表注入到模块中：https://github.com/joh04667/material-error-messages

Answer 2

这只是另一种替代解决方案，受ngx-valdemort 的启发，创建一个用于处理控件验证错误消息的组件，它只需要在 formGroup 主体中是子级并传递表单控件的名称，它不是仅限于角材料分量。

@Component({
  selector: 'error-summary',
  templateUrl: './error-summary.component.html',
  styleUrls: ['./error-summary.component.css']
})
export class ErrorSummaryComponent  {

  @Input() control:string;

  @Input() visible:any;

  constructor(private controlContainer: ControlContainer) { }

  get form():FormGroup {
    return this.controlContainer.control  as FormGroup;
  }

  get formControl() :AbstractControl{
    return this.form.get(this.control) as AbstractControl;
  }

  get isNotValid() {
    return this.formControl.invalid && (this.formControl.touched || this.formControl.dirty)
  }

}

模板

<ng-container *ngIf="isNotValid"  >
  <ng-container *ngIf="formControl.hasError('required')"> this is required </ng-container>
  <ng-container *ngIf="formControl.hasError('email')">this not valid email format</ng-container>
  <ng-container *ngIf="formControl.hasError('maxlength')">max ...</ng-container>
  <ng-container *ngIf="formControl.hasError('minlength')">min ...</ng-container>
</ng-container>

可以这样使用

<form [formGroup]="form">

  <mat-form-field>
        <input matInput placeholder="Enter your email" formControlName="email">
  </mat-form-field>
    <error-summary control="email" ></error-summary>

  ...

</form>

demo ??