如何以角度验证特定的ngModel答案

【问题标题】：How to validate specific ngModel in angular如何以角度验证特定的ngModel
【发布时间】：2020-06-24 11:53:14
【问题描述】：

如何验证特定的ngModels 角度

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

我可以使用验证完整形式（全部ngModels） this.myForm.valid.
并且还要验证特定的ngModels 我可以遍历this.myForm.controls 并验证特定的。

是否有另一种方法来验证而不是循环遍历整个表单控件？

下面的完整示例

@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？

我怎样才能只验证一行？

【问题讨论】：

你能在 stackblitz 中重现你的问题吗

标签： angular forms validation

【解决方案1】：

在您的示例中，您正在 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 一起用于动态字段。

【讨论】：

【解决方案2】：

我想你正在寻找这个：

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

【讨论】：

【解决方案3】：

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

所以解决方案是为每个表格行添加表单标签

等等...<form> 标签在table 中是不允许的，它会破坏表格布局

但是我们可以在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>

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

【讨论】：