Проверка массива полей ввода в Angular 2+

Question

В этом паке у меня есть угловая форма, которая содержит одно поле ввода, за которым следует массив полей ввода. Мне нужно проверить, что любое из этих полей не является пустым.

Одно поле работает хорошо, но я борюсь с проверкой массива полей, я получаю сообщение об ошибке Error: Cannot assign to a reference or variable! когда форма отображается. Есть идеи, как исправить попытку взлома?

@Component({
  selector: 'my-app',
  template: `
   <form #f="ngForm" name="form" (ngSubmit)="ok(f.form)" novalidate>
       <input name="singleField" id="singleField" [(ngModel)]="field1"  
              #singleField="ngModel" required />
       <div *ngIf="singleField.touched || submitted" class="errorMsg">
            <label *ngIf="singleField.control.hasError('required')">
                Field is required
            </label>
       </div>
       <br/><br/>
       <div *ngFor="let field2 of manyFields; let i = index">
           <input name="field" id="field" [(ngModel)]="field2"  
                  #field="ngModel" required />
           <div *ngIf="field.touched || submitted" class="errorMsg">
                <label *ngIf="field.control.hasError('required')">
                    Field is required
                </label>
           </div>
       </div>
       <br/><br/>
       <button type="submit">Submit</button>
   </form>
  `,
  styles: [`
    .errorMsg {
      color: red;
    }
  `]
})
export class App {

       field1: string = 'delete this';
       manyFields: string[] = ['Field 1', 'Field 2', 'Field 3'];

       ok(form: any){
            if (form.valid)
                 alert("Form is valid");
            else     
                 alert("Form is NOT valid");
       }
}

Answer 1

Error: Cannot assign to a reference or variable ошибка, потому что [(ngModel)]="field2" ты не можешь агитировать field2

это решит ошибку и сделает required проверка работ

<input [name]="field2" [id]="field2" ngModel #field="ngModel" required /> 

Я должен использовать значение field от имени и идентификатора атрибута.

проверить динамические поля

  manyFieldsValidators(form: any) {
    let fields: string[] = [];

    if (form && form.value) {
      for (let f of this.manyFields) {
        if (form.value[f] === '') {
          fields.push(f)
        } 
      } 
    }

    if (fields.length > 0) {
      return { fields: true, message: `${fields.join(',')} are empty` }
    } else {
      return { fields: false, message: '' }
    }

  } 

шаблон

    <div class="errorMsg" *ngIf="manyFieldsValidators(f).fields">
        {{manyFieldsValidators(f).message}}
    </div>

демонстрация стекаблиц

Форма шаблона предназначена для простой формы, проверка может быть выполнена более простым способом с помощью реактивной формы. Form Array вы можете рассмотреть возможность использования reactive form