为多个输入字段创建一个FormControl

Question

我有一个Form，它包含可变数量的输入字段。它们看起来如下所示。

<mat-form-field style="width: 100%;">
   <input  matInput placeholder="" type="text"
           [formControl]="mFormControl">
</mat-form-field>

我的表单控件如下：

mFormControl = new FormControl('', [
    Validators.pattern("mypattern")
]);`

问题是，当一个输入字段错误时，表单控件会将每个输入字段验证为错误。我想，只是包含错误文本的输入字段被标记为错误。

有人知道如何实现这一目标吗？

Answer 1

尝试使用FormBuilder

HTML

<mat-form-field [formGroup]="mFormGroup" style="width: 100%;">
   <input  matInput placeholder="" type="text"
           [formControl]="mFormGroup.controls['firstName']">
</mat-form-field>

打字稿

this.mFormGroup = formBuilder.group({
                        firstName: [null, Validators.compose([Validators.required])]
                  });