如何在angular中验证特定的ngModel

Question

如何在角度中验证特定的ngModels

例如：我有一个表，我想在其中只验证ngModels的第二行

我可以使用验证完整表单(所有ngModels(this.myForm.valid
并且为了验证特定的ngModels，我可以循环通过this.myForm.controls并验证特定的一个。

有没有其他方法可以验证而不是在整个表单控件中循环？

下面的完整示例

TS

@ViewChild(NgForm, { static: false }) myForm: NgForm;
employeesData = [{id:"1",firstName:"Tom",lastName:"Cruise",photo:"https://pbs.twimg.com/profile_images/735509975649378305/B81JwLT7.jpg"},{id:"2",firstName:"Maria",lastName:null,photo:"https://pbs.twimg.com/profile_images/3424509849/bfa1b9121afc39d1dcdb53cfc423bf12.jpeg"},{id:"3",firstName:"James",lastName:null,photo:"https://pbs.twimg.com/profile_images/664886718559076352/M00cOLrh.jpg"}];
save() {
//This helps to validate all fields
console.log(this.myForm.valid);
//This contains all form keys - so I can loop through each and validate
console.log(this.myForm.controls);
}
}

HTML

<form #myForm="ngForm">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Actions</th>
</tr>
<tr *ngFor="let employee of employeesData; let i=index">
<td>
<input type="text" [(ngModel)]="employee.firstName" [name]="'firstName'+i" required>
</td>
<td>
<input type="text" [(ngModel)]="employee.lastName" [name]="'lastName'+i" required>
</td>
<td>
<button (click)="save()">Save</button>
</td>
</tr>
</table>
</form>

有没有更好的方法来验证特定的ngModel？

如何仅验证一行？

Answer 1

我的问题是-检查表的特定行中的所有input是否有效，而不是像我们对整个表所做的那样循环，只需通过tableForm.valid。

因此，解决方案是为每个表行设置表单标记

等待。。。table中不允许使用<form>标记，它将破坏表格布局

但是我们可以在tr上使用ngForm指令，并且可以验证特定的tr的ngModels

完整示例

HTML

<table>
<tr>
<th *ngFor="let header of displayedColumns">{{header}}</th>
<th>Actions</th>
</tr>
<tr ngForm #sampleForm="ngForm" *ngFor="let ds of dataSource; let i=index">
<td>
<input type="text" [(ngModel)]="ds.position" [name]="'position'+i" required>
</td>
<td>
<input type="text" [(ngModel)]="ds.name" [name]="'name'+i" required>
</td>
<td>
<input type="text" [(ngModel)]="ds.symbol" [name]="'symbol'+i" required>
</td>
<td>
<input type="text" [(ngModel)]="ds.weight" [name]="'weight'+i" required>
</td>
<td>
<button (click)="cnsl(sampleForm)">Cnsl</button>
</td>
</tr>
</table>

TS

cnsl(frm: NgForm) {
console.log(frm.controls);
}

Answer 2

在您的示例中，您正在迭代for循环中的表单字段。所以检查表格是否有效是不好的。相反，您可以在索引的帮助下检查这些字段值。

检查此项：

HTML:

<hello name="{{ name }}"></hello>
<form #myForm="ngForm">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Actions</th>
</tr>
<tr *ngFor="let employee of employeesData; let i=index">
<td>
<input type="text" [(ngModel)]="employee.firstName" [name]="'firstName'+i" required>
</td>
<td>
<input type="text" [(ngModel)]="employee.lastName" [name]="'lastName'+i" required>
</td>
<td>
<button (click)="save(i)">Save</button>
</td>
</tr>
</table>
</form>

TS:

save(i) {
// console.log(this.employeesData[i])
// if (!this.myForm.valid) {
//   alert('Please enter details');
// } else {
//   alert('Saved');
// }
if(this.employeesData[i].firstName && this.employeesData[i].lastName) {
alert('Saved');
}
else {
alert('Please enter details');
}
}

否则，您可以将Angular Reactive Form与FormArray一起用于动态字段。

Answer 3

我想你正在寻找这个：

this.ngForm.controls['firstname'].(multiple methods) ->  // all different methods associated with this.