Angular 反应式表单组验证仅适用于 Mat-table 中的任何一行
Angular reactive forms form-group validations are working only for any one row in Mat-table
我的垫子 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]],
});
}
您应该在 addElement
方法中向 FormGroup
添加控件。
类似于:
addElement() {
this. auditUserValidation.addControl('new', new FormControl('', Validators.required));
}
请看这个stackblitz
通常,您有一个 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>
已更新 添加和删除行
(*) 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>;
我的垫子 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]],
});
}
您应该在 addElement
方法中向 FormGroup
添加控件。
类似于:
addElement() {
this. auditUserValidation.addControl('new', new FormControl('', Validators.required));
}
请看这个stackblitz
通常,您有一个 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>
已更新 添加和删除行
(*) 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>;