验证 Angular 中的输入字段数组 2+

Question

In this plunk 我有一个 Angular 表单，其中包含一个输入字段，后跟一组输入字段。我需要验证这些字段中的任何一个都不为空。

单个字段运行良好，但我正在努力验证字段数组，显示表单时出现错误 Error: Cannot assign to a reference or variable!。有什么想法可以解决 plunk 尝试吗？

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

我使用了 name 和 id 属性中 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>

stackblitz demo

template form is meant for simple form ,validation can be done in more cleaner way by reactive form Form Array you may consider to use reactive form

验证 Angular 中的输入字段数组 2+

Validating array of input fields in Angular 2+

angular

typescript

angular-forms

angular-template-form