具有反应形式的自定义控件 [英] Custom Controls with Reactive Forms

问题描述

我正在将Angular 7，Angular Material控件与反应形式一起使用.

I am using Angular 7, Angular Material controls with Reactive Forms.

我创建了自定义文本(matInput type ="text")，数字(matInput type ="number")，并选择了(matSelect)带有mat-form-field的Angular Material控件

I created custom text (matInput type="text"), number (matInput type="number"), select (matSelect) controls with Angular Material with mat-form-field

在我的示例中，这是 stackblitz .

Here is the stackblitz for my example.

我试图将自定义表单控件附加到反应性表单，并尝试在表单组上自动触发任何验证.

I am trying to attach the custom form controls to reactive form and trying to fire any validations on the form group automatically.

我正在使用ControlValueAccessor来实现此目的，但是我的Select未被识别为表单控件，并且没有任何值记录在表单的表单控件中.

I am using ControlValueAccessor to achieve this, however my Select is not being identified as form control and no value is being recorded in the form control on the form.

在这方面的任何帮助都将受到高度赞赏.

Any help in this regard is highly appreciated.

推荐答案

更新 Jenson-button-event找到更好的选择，请参见

UPDATE Jenson-button-event find a better option, see the SO answer

查看您的代码，我发现您使用Angular Material来创建自定义FormControl.好吧，使用Angular材质时的问题是如何使错误"出现.

Looking into your code, I see that you use Angular Material to create your custom FormControl. Well, The problem when use Angular material is how make that the "errors" appears.

当我们使用<mat-error>时，如果控件无效，则会出现错误.请考虑无效的自定义表单控制，而不是输入材料.如何避免这种不便?

When we use <mat-error> the error appears if the control is invalid. Take account that is invalid our custom form conrol, NOT the input-material. How avoid this inconvenience?

该解决方案正在使用CustomFieldErrorMatcher.如果我们可以创建一个考虑了customFormControl错误的CustomFiledErrorMatcher，则可以执行类似的操作

The solution is using a CustomFieldErrorMatcher. if we can create a CustomFiledErrorMatcher that take account the errors of our customFormControl, we can do some like

class CustomFieldErrorMatcher implements ErrorStateMatcher {
  constructor(private customControl: FormControl) { }
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    return control.dirty && this.customControl.invalid;
  }
}

好吧，只有在ngAfterView中写一些类似的东西

Well, it's only in ngAfterView write some like

  ngAfterViewInit(): void {
    const ngControl: NgControl = this.injector.get(NgControl, null);
    if (ngControl) {
      setTimeout(() => {
        this.control = ngControl.control as FormControl;
      })
    }
  }

具有功能

errorMatcher() {
    return new CustomFieldErrorMatcher(this.control)
  }

并像这样创建我们的custom-formControl.html

And create our custom-formControl.html like

<mat-form-field>
    <mat-select [ngModel]="value" (ngModelChange)="value=$event;onChange($event)" 
          [placeholder]="placeholder" [disabled]="disabled"
          [errorStateMatcher]="errorMatcher()">
        <mat-option *ngFor="let option of optionList" [value]="option.value">
            {{ option.label }}
        </mat-option>
    </mat-select>
  <mat-error *ngIf="control?.hasError('required')">Required</mat-error>
  <mat-error *ngIf="control?.hasError('error')">{{control?.errors.error}}</mat-error>
</mat-form-field>

您可以在 stackblitz 中看到表单，一种使用customFormControl，另一种在经典模式下

You can see in the stackblitz two forms, one that use a customFormControl, and another one in clasic mode

这篇关于具有反应形式的自定义控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！