Angular 8: как использовать formControlName с FormArray - PullRequest
Новая
       31

Angular 8: как использовать formControlName с FormArray

2 голосов
/ 19 сентября 2019

Как мне сопоставить formControlName с определенным formArray элементом?

Я не могу контролировать данные сервера и пытаюсь создать форму с массивом телефонных номеров.

Сама форма визуально не размещает телефоны рядом друг с другом, и я хочу иметь возможность объявить управление вводом телефона так же, как это обычно делается с formGroup.

Ниже приведено следующее:

Контроллер: 

const exampleData = {
                'name': 'John Doe',
                'phones': [
                    {
                        'type': 'home',
                        'number': '5555555'
                    },
                    {
                        'type': 'cell',
                        'number': '5555555'
                    }
                ]
            };

    this.form = this.fb.group({
         name:[],
         phones: this.fb.array([
             this.fb.group({
                 type: '',
                 number: []
             }),
             this.fb.group({
                 type: '',
                 number: []
             })
         ]),
     });

    this.form.patchValue(exampleData);

Шаблон 

<input type="text" formControlName="name">

<!--  This works but I need to loop -->
<div formArrayName="phones">
    <div *ngFor="let phone of form.get('phones').controls; let i = index">
        <div [formGroupName]="i">
            <label>Type: </label><input formControlName="type"/>
            <label>Number: </label><input formControlName="number"/>
        </div>
    </div>
</div>

<!--  How can I point to a phone directly? -->
<input type="text" formControlName="point to type home's number...with helper function or something...">

Хотите узнать, возможно ли это вообще?

Ответы [ 2 ]

2 голосов
/ 19 сентября 2019

Попробуйте получить доступ к элементу formArray: 

  <div [formGroup]="form.get('phones').at(1)">
    <input type="text" formControlName="num">
  </div>

Stackblitz

2 голосов
/ 19 сентября 2019

Я решаю эту проблему, снова запустив setValue для этого компонента, поэтому любой вход с помощью одного и того же элемента управления формы будет обновляться, это будет похоже на двустороннее связывание данных, когда мы используем ngModel, где данные передаются мгновенному и другим элементам управления.

этот метод создаст группу Form 

getPhoneGroup() {
    const form = this.fb.group({
      type: '',
      num: []
    });

    const elm = form.get('num');
    elm.valueChanges.subscribe(val => {
      elm.setValue(val, { emitEvent: false })
    });

    return form;
  }

demo ??

...