带有反应式表单的自定义控件 [英] Custom Controls with Reactive Forms

问题描述

我正在使用 Angular 7，Angular Material 控件和 Reactive Forms.

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

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

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

这是我的示例的 stackblitz.

我正在尝试将自定义表单控件附加到响应式表单并尝试自动触发表单组上的任何验证.

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.

推荐答案

UPDATE Jenson-button-event 找到更好的选择，参见 SO 答案

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.

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

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.如果我们可以创建一个 CustomFiledErrorMatcher 来考虑 customFormControl 的错误，我们可以这样做

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屋！