Группа форм

Stable Class

Что она делает

Отслеживает значение и состояние валидности группы экземпляров FormControl.

Группа FormGroup агрегирует значения каждого дочернего элемента FormControl в один объект, используя имя каждого элемента в качестве ключа. Она рассчитывает своё состояние, уменьшая состояния своих дочерних элементов. Например, если один из элементов управления в группе невалиден, вся группа становится невалидной.

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

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

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

Пример

const form = new FormGroup({
  first: new FormControl('Nancy', Validators.minLength(2)),
  last: new FormControl('Drew'),
});

console.log(form.value);   // {first: 'Nancy', last; 'Drew'}
console.log(form.status);  // 'VALID'

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

Пример

const form = new FormGroup({
  password: new FormControl('', Validators.minLength(2)),
  passwordConfirm: new FormControl('', Validators.minLength(2)),
}, passwordMatchValidator);


function passwordMatchValidator(g: FormGroup) {
   return g.get('password').value === g.get('passwordConfirm').value
      ? null : {'mismatch': true};
}

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

Обзор класса

class FormGroup extends AbstractControl {
  constructor(controls: {[key: string]: AbstractControl}, validator?: ValidatorFn, asyncValidator?: AsyncValidatorFn)
  
  
  controls : {[key: string]: AbstractControl}
  registerControl(name: string, control: AbstractControl) : AbstractControl
  addControl(name: string, control: AbstractControl) : void
  removeControl(name: string) : void
  setControl(name: string, control: AbstractControl) : void
  contains(controlName: string) : boolean
  setValue(value: {[key: string]: any}, {onlySelf, emitEvent}?: {onlySelf?: boolean, emitEvent?: boolean}) : void
  patchValue(value: {[key: string]: any}, {onlySelf, emitEvent}?: {onlySelf?: boolean, emitEvent?: boolean}) : void
  reset(value?: any, {onlySelf, emitEvent}?: {onlySelf?: boolean, emitEvent?: boolean}) : void
  getRawValue() : any
}

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

Конструктор

constructor(controls: {[key: string]: AbstractControl}, validator?: ValidatorFn, asyncValidator?: AsyncValidatorFn)

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

controls : {[key: string]: AbstractControl}

registerControl(name: string, control: AbstractControl) : AbstractControl

Регистрирует элемент управления в списке элементов управления группы.

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

addControl(name: string, control: AbstractControl) : void

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

removeControl(name: string) : void

Удалить элемент управления из этой группы.

setControl(name: string, control: AbstractControl) : void

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

contains(controlName: string) : boolean

Проверить, есть ли в группе активированный элемент управления с заданным именем.

Он вернёт false для деактивированных элементов управления. Если вы хотите проверить существование только в группе, используйте get вместо этого.

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

Устанавливает значение FormGroup. Оно принимает объект, соответствующий структуре группы, с именами элементов управления в качестве ключей.

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

const form = new FormGroup({
   first: new FormControl(),
   last: new FormControl()
});
console.log(form.value);   // {first: null, last: null}

form.setValue({first: 'Nancy', last: 'Drew'});
console.log(form.value);   // {first: 'Nancy', last: 'Drew'}

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

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

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

const form = new FormGroup({
   first: new FormControl(),
   last: new FormControl()
});
console.log(form.value);   // {first: null, last: null}

form.patchValue({first: 'Nancy'});
console.log(form.value);   // {first: 'Nancy', last: null}

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

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

• Группа и все дочерние элементы помечаются как pristine
• Группа и все дочерние элементы помечаются как untouched
• Значение всех дочерних элементов будет null или null-картой

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

this.form.reset({first: 'name', last: 'last name'});

console.log(this.form.value);  // {first: 'name', last: 'last name'}

• ИЛИ -

this.form.reset({
  first: {value: 'name', disabled: true},
  last: 'last'
});

console.log(this.form.value);  // {first: 'name', last: 'last name'}
console.log(this.form.get('first').status);  // 'DISABLED'

getRawValue() : any

Агрегированное значение FormGroup, включая любые деактивированные элементы управления.

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

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