Как проверить спецификацию c ngModel в angular - PullRequest
Новая
       7

Как проверить спецификацию c ngModel в angular

0 голосов
/ 12 марта 2020

Как проверить спецификацию c ngModels в angular

Например: у меня есть таблица, в которой я хотел бы проверить только вторую строку из ngModels

Я могу проверить полную форму (Все ngModels), используя this.myForm.valid.
, а также проверить спецификацию c ngModels Я могу l oop через this.myForm.controls и проверить спецификацию c one.

Есть ли другой способ проверки вместо циклического перемещения по элементам управления всей формы?

Полный пример ниже

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>

Есть ли лучший способ проверки указанных c ngModels?

Как Могу ли я проверить только одну строку?

Ответы [ 2 ]

0 голосов
/ 13 марта 2020

Я думаю, что вы ищете это: 

this.ngForm.controls['firstname'].(multiple methods) ->  // all different methods associated with this.
0 голосов
/ 12 марта 2020

В вашем примере вы перебираете поля формы для l oop. Так что не стоит проверять, действительна форма или нет. Вместо этого вы можете проверить эти значения полей с помощью индекса.

Проверьте это:

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 Реактивная форма с FormArray для динамических c полей.

...