FormArrayName — Angular

Связывает вложенный FormArray с элементом DOM.

API

class FormArrayName extends ControlContainer implements OnInit ,OnDestroy {
  constructor(parent: ControlContainer, validators: (ValidatorFn | Validator)[], asyncValidators: (AsyncValidatorFn | AsyncValidator)[]): FormArrayName;
  @Input('formArrayName') name: string | number | null;
  readonly control: FormArray<any>;
  readonly formDirective: AbstractFormDirective | null;
  readonly path: string[];
  override readonly value: any;
  override readonly valid: boolean | null;
  override readonly invalid: boolean | null;
  override readonly pending: boolean | null;
  override readonly disabled: boolean | null;
  override readonly enabled: boolean | null;
  override readonly errors: ValidationErrors | null;
  override readonly pristine: boolean | null;
  override readonly dirty: boolean | null;
  override readonly touched: boolean | null;
  override readonly status: string | null;
  override readonly untouched: boolean | null;
  override readonly statusChanges: any;
  override readonly valueChanges: any;
  override readonly validator: ValidatorFn | null;
  override readonly asyncValidator: AsyncValidatorFn | null;
  override reset(value?: any): void;
  override hasError(errorCode: string, path?: string | (string | number)[] | undefined): boolean;
  override getError(errorCode: string, path?: string | (string | number)[] | undefined): any;
}

constructor

FormArrayName

@paramparentControlContainer

@paramvalidators(ValidatorFn | Validator)[]

@paramasyncValidators(AsyncValidatorFn | AsyncValidator)[]

@returnsFormArrayName

name

string | number | null

Отслеживает имя FormArray, связанного с директивой. Имя соответствует ключу в родительском FormGroup или FormArray. Принимает имя в виде строки или числа. Строковое имя удобно для отдельных форм, а числовое позволяет привязывать массивы форм к индексам при переборе массивов в FormArray.

control

FormArray<any>

FormArray, связанный с этой директивой.

formDirective

AbstractFormDirective | null

Директива верхнего уровня для этой группы, если она есть; в противном случае — null.

path

string[]

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

value

any

Возвращает значение элемента управления, если он существует; в противном случае — null.

valid

boolean | null

Сообщает, является ли элемент управления допустимым. Элемент управления считается допустимым, если для его текущего значения нет ошибок проверки. Если элемент управления отсутствует, возвращается null.

invalid

boolean | null

Сообщает, является ли элемент управления недопустимым, то есть содержит ли введённое значение ошибку. Если элемент управления отсутствует, возвращается null.

pending

boolean | null

Сообщает, находится ли элемент управления в состоянии ожидания: выполняется асинхронная проверка, и ошибки для введённого значения ещё недоступны. Если элемент управления отсутствует, возвращается null.

disabled

boolean | null

Сообщает, отключён ли элемент управления, то есть отключён ли он в пользовательском интерфейсе, исключён ли из проверок и из агрегированных значений родительских элементов управления. Если элемент управления отсутствует, возвращается null.

enabled

boolean | null

Сообщает, включён ли элемент управления, то есть учитывается ли он при вычислении допустимости или значения родительских элементов управления. Если элемент управления отсутствует, возвращается null.

errors

ValidationErrors | null

Возвращает ошибки проверки элемента управления. Если элемент управления отсутствует, возвращается null.

pristine

boolean | null

Сообщает, является ли элемент управления нетронутым, то есть изменил ли пользователь его значение в пользовательском интерфейсе. Если элемент управления отсутствует, возвращается null.

dirty

boolean | null

Сообщает, изменил ли пользователь значение элемента управления в пользовательском интерфейсе. Если элемент управления отсутствует, возвращается null.

touched

boolean | null

Сообщает, был ли элемент управления затронут, то есть вызвал ли пользователь для него событие blur. Если элемент управления отсутствует, возвращается null.

status

string | null

Возвращает статус проверки элемента управления. Возможные значения: 'VALID', 'INVALID', 'DISABLED' и 'PENDING'. Если элемент управления отсутствует, возвращается null.

untouched

boolean | null

Сообщает, не был ли элемент управления затронут, то есть вызывал ли пользователь для него событие blur. Если элемент управления отсутствует, возвращается null.

statusChanges

any

Возвращает многоадресный наблюдаемый объект, который выдаёт статус проверки каждый раз, когда он вычисляется для элемента управления. Если элемент управления отсутствует, возвращается null.

valueChanges

any

Возвращает многоадресный наблюдаемый объект изменений значения элемента управления. Он выдаёт новое значение при каждом его изменении в пользовательском интерфейсе или программно. Если элемент управления отсутствует, возвращается null.

validator

ValidatorFn | null

Синхронная функция проверки, объединяющая все синхронные проверки, зарегистрированные этой директивой.

asyncValidator

AsyncValidatorFn | null

Асинхронная функция проверки, объединяющая все асинхронные проверки, зарегистрированные этой директивой.

reset

void

Сбрасывает элемент управления, задавая указанное значение, если элемент управления существует.

@paramvalueany

@returnsvoid

hasError

boolean

Сообщает, есть ли у элемента управления по указанному пути заданная ошибка.

@paramerrorCodestring

Код проверяемой ошибки

@parampathstring | (string | number)[] | undefined

Список имён элементов управления, задающий путь от текущего элемента управления до элемента, в котором нужно проверить наличие ошибок.

@returnsboolean

Сведения о том, присутствует ли указанная ошибка у элемента управления по заданному пути.

Если элемент управления отсутствует, возвращается false.

Примечания по использованию

Например, для следующего FormGroup:

form = new FormGroup({
  address: new FormGroup({ street: new FormControl() })
});

Путь от корневой формы к элементу управления 'street' будет таким: 'address' -> 'street'.

Его можно передать этому методу в одном из двух форматов:

Массив строк с именами элементов управления, например ['address', 'street']
Список имён элементов управления, разделённых точками и записанных в виде одной строки, например 'address.street'

Если путь не указан, этот метод проверяет наличие ошибки у текущего элемента управления.

getError

any

Возвращает сведения об ошибке для элемента управления по указанному пути.

@paramerrorCodestring

Код проверяемой ошибки

@parampathstring | (string | number)[] | undefined

@returnsany

Сведения об указанной ошибке. Если элемент управления или ошибка отсутствуют, возвращается null.

Примечания по использованию

Например, для следующего FormGroup:

form = new FormGroup({
  address: new FormGroup({ street: new FormControl() })
});

Путь от корневой формы к элементу управления 'street' будет таким: 'address' -> 'street'.

Его можно передать этому методу в одном из двух форматов:

Массив строк с именами элементов управления, например ['address', 'street']
Список имён элементов управления, разделённых точками и записанных в виде одной строки, например 'address.street'

Описание

Связывает вложенный FormArray с элементом DOM.

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

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

Экспортируется модулем

ReactiveFormsModule

Примечания по использованию

Пример

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">
        @for (city of cities.controls; track city) {
          <input [formControlName]="$index" placeholder="City" />
        }
      </div>
      <button>Submit</button>
    </form>

    <button (click)="addCity()">Add City</button>
    <button (click)="setPreset()">Set preset</button>
  `,
  standalone: false,
})
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']);
  }
}