如何在 angular 中验证动态表单组输入

Question

我在 angular material table 中创建了动态 formGroup。每行都有一个 input 字段和 add to cart & 删除按钮。如果特定行的输入无效，则应在每一行中禁用按钮。请让我知道我在哪里犯了错误。

源代码：Demo

图片：

html:

<form [formGroup]="productForm">
   <table
      mat-table
      formArrayName="productsArray"
      [dataSource]="tableDetails"
      multiTemplateDataRows
      matSort
      >
      <ng-container matColumnDef="date">
         <mat-header-cell *matHeaderCellDef mat-sort-header>
            Product Date
         </mat-header-cell>
         <mat-cell *matCellDef="let row">
            {{ row.value.date | date: 'dd-MMM-yyyy' }}
         </mat-cell>
      </ng-container>
      <ng-container matColumnDef="expandedDetail">
         <mat-cell
         *matCellDef="let child; let rowindex = dataIndex"
         [attr.colspan]="tableColumns.length"
         [formGroupName]="tableDetails.data.indexOf(child)"
         >
         <div class="col-sm-6 mt-3">
            <div class="row pb-1">
               <h6>Input 2</h6>
               <textarea
                  formControlName="input2"
                  ></textarea>
            </div>
            <button [disabled]="productForm.invalid" (click)="addCart()">
            add to cart
            </button>
            <button>remove</button>
         </div>
         </mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="tableColumns"></mat-header-row>
      <mat-row
         matRipple
         *matRowDef="let child; columns: tableColumns"
         class="element-row"
         ></mat-row>
      <mat-row
         *matRowDef="let row; columns: ['expandedDetail']"
         style="overflow: hidden"
         ></mat-row>
   </table>
</form>

Answer 1

这里我添加了一个示例代码，以便您参考，也请参阅附件以了解更多详细信息 - https://netbasal.com/three-ways-to-dynamically-alter-your-form-validation-in-angular-e5fd15f1e946

ngOnInit() {
    this.form = new FormGroup({
      optionA: new FormControl(false),
      optionB: new FormControl(false),
      optionBExtra: new FormControl({ disabled: true, value: '' }, 
                   [Validators.required, Validators.minLength(5)])
    });

    this.optionB.valueChanges.subscribe(checked => {
      checked ? this.optionBExtra.enable() : this.optionBExtra.disable()
    });
  }

Answer 2

使用索引访问 formArray 中的 FormGroup，然后检查该 formGroup 是否无效。

<button [disabled]="productForm.get('productsArray').at(tableDetails.data.indexOf(child)).invalid" (click)="addCart()">
                add to cart
</button>

ForkedExample

如何在 angular 中验证动态表单组输入

How validate dynamic formgroup input in angular

angular-material

angular

angular-forms

formgroups