Angular 反应式表单组验证仅适用于 Mat-table 中的任何一行

Question

我的垫子 table 有多行，带有添加按钮，单击它会添加一个新行 。我想为所有行添加验证，现在我下面的代码只对任何一行进行验证。

我的component.html

<form [formGroup]="auditUserValidation">
<mat-table [dataSource]="dataSource">

<ng-container matColumnDef="Audit">

<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-select formControlName="name" placeholder="Pls select">
<mat-option [value]="audit" *ngFor="let name of nameList">{{name.firstname}}</mat-option>
</mat-select></mat-cell>

</ng-container>

<ng-container matColumnDef="Country">

<mat-header-cell *matHeaderCellDef> Country</mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-select formControlName="Country" placeholder="Pls select">
<mat-option [value]="audit" *ngFor="let country of CountryList">{{country.name}}</mat-option>
</mat-select></mat-cell>

</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>


Save button which i want to disable if all rows not selected

<button type="button" (click)="addElement()"> <i class="material-icons">add</i>Add</button>
<button type="button" [disabled]='auditUserValidation.invalid' (click)="submitReport()">Save</button>

我的component.ts文件

  auditUserValidation: FormGroup;

  constructor(private formBuilder: FormBuilder }   
  ngOnInit() {
    this.auditUserValidation = this.formBuilder.group({
      name: ['', [Validators.required]],
      Country: ['', [Validators.required]],
    });
}

Answer 1

您应该在 addElement 方法中向 FormGroup 添加控件。
类似于：

addElement() {
 this. auditUserValidation.addControl('new', new FormControl('', Validators.required));
}

请看这个stackblitz

Answer 2

通常，您有一个 formArray。一如既往，我们有一个函数 return 一个 formGroup

createGroup(data:any)
  {
    data=data || {name:'',surname:''}
    return new FormGroup({
      name: new FormControl(data.name,Validators.required),
      surname: new FormControl(data.surname,Validators.required)
    })
  }

创建 formArray 后，我们制作 "dataSource" formArray.controls

  this.dataSource=this.myformArray.controls

所以，唯一的问题就是

element.get('name').touched &&element.get('name').errors

例如

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element">
       <input [formControl]="element.get('name')">
              <div *ngIf="element.get('name').touched 
                 && element.get('name').errors">required</div>
           </td>
  </ng-container>

  <!-- Surname Column -->
  <ng-container matColumnDef="surname">
    <th mat-header-cell *matHeaderCellDef> Surname </th>
        <td mat-cell *matCellDef="let element">

       <input [formControl]="element.get('surname')">
       <div *ngIf="element.get('surname').touched 
         && element.get('surname').errors">required</div>
       </td>
  </ng-container>
  <!--if we want delete the row (*)-->
  <ng-container matColumnDef="delete">
    <th mat-header-cell *matHeaderCellDef> </th>
       <td mat-cell *matCellDef="let i = index;">
          <button mat-button (click)="remove(i)">delete</button>
       </td>
  </ng-container>


  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

查看stackblitz

已更新 添加和删除行

(*) displayedColumns 变成了

displayedColumns: string[] = ['name','surname','delete'];

两个函数用于添加和删除行

  add() {
    this.myformArray.push(this.createGroup(null));
    this.table.renderRows(); //<--see that we need refresh the table
  }
  remove(index: number) {
    this.myformArray.removeAt(index);
    this.table.renderRows();  //<--see that we need refresh the table
  }

其中 table 是

  @ViewChild(MatTable, { static: false }) table: MatTable<any>;

Angular 反应式表单组验证仅适用于 Mat-table 中的任何一行

Angular reactive forms form-group validations are working only for any one row in Mat-table

angular

angular-material

angular-forms

angular2-form-validation