如何验证反应形式的字段数组？

Question

我看到了一些示例，但还没有找到一种验证表单的方法。我基本上有一个包含要验证的字段数组的表单，因为它们是必需的。

this.formNames = this.fb.group({
  element_name: new FormControl('', [Validators.required]) //input text 
});

this.myForm = this.fb.group({
  names: this.fb.array([
      this.formNames,  
      this.formNames
  ])
})

我有一个问题，我正在尝试验证由names表示并且是必需的文本字段。但是，如果我在任何文本字段中添加文本，它们都经过验证，那么图像中会发生什么，我希望当我在相应的文本字段中编写内容时，仅对该字段进行验证。

这是我的实时代码：

https://stackblitz.com/edit/angular-xkhkoc?file=app/app.component.ts

<form [formGroup]="myForm">
  <div formArrayName="names">
  <ng-container
      *ngFor="let item of myForm.get('names').controls; let i=index">
      <div [formGroupName]="i">
              <input type="text" class="form-control" id="element_name"
                  formControlName="element_name"
                  placeholder="insert name" 
              >
              {{item.controls['element_name'].valid | json}}
      </div>
   </ng-container>
  </div>
 </form>

Answer 1

您对所有输入使用同一对象。试试这个。

this.myForm = this.fb.group({
  names: this.fb.array([
    this.fb.group({ element_name: [null, [Validators.required]] }),
    this.fb.group({ element_name: [null, [Validators.required]] }),
  ])
})