Как создать динамический массив в угловой 4 реактивной форме и привязать каждое поле с помощью ввода (formControlName)? - PullRequest
Новая
       48

Как создать динамический массив в угловой 4 реактивной форме и привязать каждое поле с помощью ввода (formControlName)?

0 голосов
/ 08 октября 2018

Я работаю в Angular 4 и столкнулся с проблемой, я создал массив в форме и связал каждую группу с полем ввода, но когда я заполняю первое поле, оно автоматически заполнит второе поле в браузере, но в формебудет доступно только значение в одном поле.

dynamicArray.ts 

addNewArrayForm : FormGroup;

constructor(private formBuilder : FormBuilder){}

ngOnInit() {
   this.addNewArrayForm = this.formBuilder.group({
      testArray : this.formBuilder.array([])
   });

   let arrayValue = [1, 2, 3, 4, 5];
   let testArrayField = <FormArray>this.addNewArrayForm.controls['testArray'];
   for(let value of arrayValue){
      testArrayField.push(new FormControl(null));
   }

   checkValue(){
      console.log(this.addNewArrayForm.value);
      //Output 
      {
         testArray : ['1','12',null,null,null]
      }
   }
}

dynamicArray.html 

<form [formGroup] = "addNewArrayForm">
   <div class="card" formArrayName="testArray" *ngIf="addNewArrayForm.controls['testArray'].value && (addNewArrayForm.controls['testArray'].value).length > 0">
      <div *ngFor="let value of addNewArrayForm.controls['testArray'].value; let x = index ">
         <input type="text" formControlName="{{x}}">
      </div>
      <div>
         <button type="button" class="btn" (click)="checkValue()">Click</button>
      </div>
   </div>
</form>

Вы можете проверить мою проблему по этой ссылке: https://angular -pdx2q2.stackblitz.io

Спасибо.

1 Ответ

0 голосов
/ 08 октября 2018

Просто используйте параметр trackBy в вашей директиве ngFor, чтобы избежать путаницы:

шаблон 

*ngFor="let value of addNewArrayForm.controls['testArray'].value; ...; trackBy: trackByFn"

компонент 

trackByFn(index: number) {
  return index;
}

Forked Пример Stackblitz

...