Angular 反应式表单组验证仅适用于 Mat-table 中的任何一行 [英] Angular reactive forms form-group validations are working only for any one row in Mat-table

问题描述

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

I have Mat table with multiple rows, with add button ,on click of it, adds a new row. i want to add validations for all the rows ,right now my code below is taking a validation only for any one row.

我的 component.html

my 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 文件

my component.ts file

  auditUserValidation: FormGroup;

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

推荐答案

通常，您有一个 formArray.和往常一样，我们有一个返回 formGroup 的函数

In general, you has a formArray. As always, we has a function that return a 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

After create the formArray, we make the "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'];

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

Two functions serve to add and remove rows

  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 中的任何一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！