Массив форм

Stable Class

Что он делает

Отслеживает значение и состояние валидности массива экземпляров FormControl, FormGroup или FormArray.

Массив FormArray агрегирует значения каждого дочернего FormControl в массив. Он рассчитывает своё состояние, сводя состояния своих дочерних элементов. Например, если один из элементов управления в FormArray невалиден, весь массив становится невалидным.

FormArray — один из трёх основных строительных блоков, используемых для определения форм в Angular, наряду с FormControl и FormGroup.

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

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

Пример

const arr = new FormArray([
  new FormControl('Nancy', Validators.minLength(2)),
  new FormControl('Drew'),
]);

console.log(arr.value);   // ['Nancy', 'Drew']
console.log(arr.status);  // 'VALID'

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

Добавление или удаление элементов управления

Чтобы изменить элементы управления в массиве, используйте методы push, insert, или removeAt в самом FormArray. Эти методы гарантируют, что элементы управления правильно отслеживаются в иерархии формы. Не изменяйте массив AbstractControl используемый для инициализации FormArray напрямую, так как это приведёт к странному и непредсказуемому поведению, например, к поломке обнаружения изменений.

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

Обзор класса

class FormArray extends AbstractControl {
  constructor(controls: AbstractControl[], validator?: ValidatorFn, asyncValidator?: AsyncValidatorFn)
  
  
  controls : AbstractControl[]
  at(index: number) : AbstractControl
  push(control: AbstractControl) : void
  insert(index: number, control: AbstractControl) : void
  removeAt(index: number) : void
  setControl(index: number, control: AbstractControl) : void
  length : number
  setValue(value: any[], {onlySelf, emitEvent}?: {onlySelf?: boolean, emitEvent?: boolean}) : void
  patchValue(value: any[], {onlySelf, emitEvent}?: {onlySelf?: boolean, emitEvent?: boolean}) : void
  reset(value?: any, {onlySelf, emitEvent}?: {onlySelf?: boolean, emitEvent?: boolean}) : void
  getRawValue() : any[]
}

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

Конструктор

constructor(controls: AbstractControl[], validator?: ValidatorFn, asyncValidator?: AsyncValidatorFn)

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

controls : AbstractControl[]

at(index: number) : AbstractControl

Получить AbstractControl по заданному index в массиве.

push(control: AbstractControl) : void

Вставить новый AbstractControl в конец массива.

insert(index: number, control: AbstractControl) : void

Вставить новый AbstractControl по заданному index в массиве.

removeAt(index: number) : void

Удалить элемент управления по заданному index в массиве.

setControl(index: number, control: AbstractControl) : void

Заменить существующий элемент управления.

length : number

Длина массива элементов управления.

setValue(value: any[], {onlySelf, emitEvent}?: {onlySelf?: boolean, emitEvent?: boolean}) : void

Устанавливает значение FormArray. Принимает массив, соответствующий структуре элемента управления.

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

const arr = new FormArray([
   new FormControl(),
   new FormControl()
]);
console.log(arr.value);   // [null, null]

arr.setValue(['Nancy', 'Drew']);
console.log(arr.value);   // ['Nancy', 'Drew']

patchValue(value: any[], {onlySelf, emitEvent}?: {onlySelf?: boolean, emitEvent?: boolean}) : void

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

Он принимает как супермножества, так и подмножества массива без вывода ошибки.

const arr = new FormArray([
   new FormControl(),
   new FormControl()
]);
console.log(arr.value);   // [null, null]

arr.patchValue(['Nancy']);
console.log(arr.value);   // ['Nancy', null]

reset(value?: any, {onlySelf, emitEvent}?: {onlySelf?: boolean, emitEvent?: boolean}) : void

Сбрасывает FormArray. Это означает, что по умолчанию:

• Массив и все потомки помечены pristine
• Массив и все потомки помечены untouched
• Значение всех потомков будет null или null-мапами

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

this.arr.reset(['name', 'last name']);

console.log(this.arr.value);  // ['name', 'last name']

• ИЛИ -

this.arr.reset([
  {value: 'name', disabled: true},
  'last'
]);

console.log(this.arr.value);  // ['name', 'last name']
console.log(this.arr.get(0).status);  // 'DISABLED'

getRawValue() : any[]

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

Если вам нужно включить все значения независимо от статуса отключён/включён, используйте этот метод. В противном случае свойство value — лучший способ получить значение массива.

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