0

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

我的 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]],
    });
}
4

2 回答 2

1

通常，您有一个 formArray。和往常一样，我们有一个返回 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>

查看堆栈闪电战

更新了添加和删除行

(*)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>;
于 2019-12-04T07:42:59.077 回答
0

您应该将控件添加到FormGroupinaddElement方法。
就像是： 

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

请看看这个stackblitz

于 2019-12-04T07:30:27.953 回答