如何将 formGroup 分配给数组以进行表单验证

Question

我在 angular 中有一个转发器部分，我按照下面的方法来实现它，但我想验证表单（根据验证启用或禁用最终提交按钮），这是示例代码。

ts 文件：-

      private formBuilder : FormBuilder
) { }
 
formInfoHolder = [];

onAdd(){
    let newForm = {
         let newForm = {
    subText : new FormControl('',[Validators.required,Validators.maxLength(250)]),
    header : new FormControl('',[Validators.required,Validators.maxLength(20)]),
    link : new FormControl('',[Validators.required,Validators.pattern('[a-zA-Z]*')]),  
}
        
    }
    this.formInfoHolder.push(this.formBuilder.group(newForm))
}
delete(toDelete){
    let del : any[] = [];
    for(let form of this.formInfoHolder){
       if(toDelete !== form){
            del.push(form);
       }
    }
    this.formInfoHolder = del;
}

然后在 HTML 组件中

<div *ngFor="let form of formInfoHolder">
     <form [formGroup]="form">
         <label for="username"> Username </label>
         <input id="username" type="text" formControlName="username">
         <!-- insert other input elements with the formControlName -->
         <label for="delete"> Delete </label>
         <input id="delete" type="button" (click)="delete(form)">
     </form>
</div>
<button (click)="onAdd()">Add</button>
<button [disabled]="//Here i want to validate" (click)="saveInfo()">Save</button>

我如何验证存储在数组中的表单（仅在填写所有字段时才启用按钮）。

Answer 1

这是您正在寻找的Stackblitz 示例我使用了 formarray 并在其中添加了 formgroups，在 formarray 中添加和删除 formgroups 变得很容易。 验证也变得容易，因为我只检查主表单是否有效