FormArrayName

Stable Directive

Что делает

Синхронизирует вложенный FormArray с элементом DOM.

Как использовать

Эта директива предназначена для использования с родительской FormGroupDirective (селектор: [formGroup]).

Она принимает строковое имя вложенного FormArray, который нужно связать, и будет искать FormArray с этим именем в родительском экземпляре FormGroup, который вы передали в FormGroupDirective.

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

Доступ к массиву: Вы можете получить связанный FormArray с помощью метода get родительского FormGroup. Пример: this.form.get('cities').

Получение значения: свойство value всегда синхронизировано и доступно в FormArray. Полный список доступных свойств см. в AbstractControl.

Установка значения: Вы можете установить начальное значение для каждого дочернего элемента управления при создании FormArray или установить значение программно позже, используя методы FormArray setValue или patchValue.

Прослушивание изменений значения: Если вы хотите прослушивать изменения значения массива, вы можете подписаться на событие FormArray valueChanges. Вы также можете прослушать событие statusChanges, чтобы быть уведомленным о перерасчёте состояния валидации.

Добавление новых элементов управления: Вы можете динамически добавлять новые элементы управления в FormArray, вызвав метод push. Пример: this.form.get('cities').push(new FormControl());

Пример

import {Component} from '@angular/core';
import {FormArray, FormControl, FormGroup} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <div formArrayName="cities">
        <div *ngFor="let city of cities.controls; let i=index">
          <input [formControlName]="i" placeholder="City">
        </div>
      </div>
      <button>Submit</button>
    </form>

    <button (click)="addCity()">Add City</button>
    <button (click)="setPreset()">Set preset</button>
  `,
})
export class NestedFormArray {
  form = new FormGroup({
    cities: new FormArray([
      new FormControl('SF'),
      new FormControl('NY'),
    ]),
  });

  get cities(): FormArray { return this.form.get('cities') as FormArray; }

  addCity() { this.cities.push(new FormControl()); }

  onSubmit() {
    console.log(this.cities.value);  // ['SF', 'NY']
    console.log(this.form.value);    // { cities: ['SF', 'NY'] }
  }

  setPreset() { this.cities.patchValue(['LA', 'MTV']); }
}

• npm пакет: @angular/forms

• NgModule: ReactiveFormsModule

Обзор класса

class FormArrayName extends ControlContainer implements OnInit,  OnDestroy {
  constructor(parent: ControlContainer, validators: any[], asyncValidators: any[])
  
  
  name : string
  ngOnInit() : void
  ngOnDestroy() : void
  control : FormArray
  formDirective : FormGroupDirective
  path : string[]
  validator : ValidatorFn
  asyncValidator : AsyncValidatorFn
}

Селекторы

[formArrayName]

Описание класса

Конструктор

constructor(parent: ControlContainer, validators: any[], asyncValidators: any[])

Подробности класса

name : string

ngOnInit() : void

ngOnDestroy() : void

control : FormArray

formDirective : FormGroupDirective

path : string[]

validator : ValidatorFn

asyncValidator : AsyncValidatorFn

экспортировано из @angular/forms/index, определено в @angular/forms/src/directives/reactive_directives/form_group_name.ts