Валидаторы для динамически генерируемых полей ввода в угловых - PullRequest
Новая
       38

Валидаторы для динамически генерируемых полей ввода в угловых

0 голосов
/ 17 октября 2019

Я не могу применить валидаторы ко всем входным полям, сгенерированным динамически. Это работает только для первого поля ввода.

Я пытался использовать linkSubmitForm.controls.links.<controls-I-valid>, но ничего не возвращается. Помогите пожалуйста !!

Мой html код: 

<form [formGroup]="linkSubmitForm" (ngSubmit)="onSubmit()"></form>
    <input #myInput *ngFor="let link of links.controls; let i=index" class="form-control" type="file" [formControlName]="i" required>
    <div *ngIf="linkSubmitForm.controls.links.invalid && 
                linkSubmitForm.controls.links.touched" >
        This field is required
    </div>
    <button type="submit">Submit</button>
</form>

Мой ts код: 

@ViewChild('myInput') inputEl: ElementRef;
@ViewChildren('myInput', { read: ElementRef }) many_links_el: QueryList<ElementRef>

linkSubmitForm = this.formBuilder.group({
    links: this.formBuilder.array([
        this.formBuilder.control(''),
        Validators.required,
    ]),
});

get links() { return this.linkSubmitForm.get('links') as FormArray; }

ngOnInit() { `enter code here` while(--3) this.links.push(this.formBuilder.control('', Validators.required) }

onSubmit() {

    let inputEl: HTMLInputElement = this.inputEl.nativeElement;

    //var formData = new FormData();
    this.file = inputEl.files;

    console.log('file object', this.file);
    this.many_links_el.toArray();

     let files=[];
     this.many_links_el.forEach((e)=>{
     let inputElement=e.nativeElement;
     if(inputElement.files.length){
         files.push(inputElement.files[0])
     }
   })
   console.log(files)
}

1 Ответ

1 голос
/ 17 октября 2019

Вы должны оставить Validators.required в самом элементе управления. И тогда вы можете получить каждый элемент управления, как показано ниже

Файл шаблона 

<form [formGroup]='testForm'>
  <div formArrayName="names">
    <h3>Names</h3> <button (click)="addName()">Add Alias</button>

    <div *ngFor="let name of names.controls; let i=index">
      <label>
      Name:
      <input type="text" [formControlName]="i">
      <div *ngIf="names.controls[i].status === 'INVALID' && 
            names.controls[i].touched">
        Above field is required
      </div>
    </label>
    </div>
  </div>
</form>

Файл TS 

this.testForm = this.fb.group({
  names: this.fb.array([
    this.fb.control('', [Validators.required])
  ])
});

Рабочая Stackblitz

...