FormControl

Stable Class

Что делает

Отслеживает значение и статус валидации отдельного элемента формы.

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

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

При создании FormControl, можно передать начальное значение в качестве первого аргумента. Пример:

const ctrl = new FormControl('some value');
console.log(ctrl.value);     // 'some value'

Также можно инициализировать элемент с объектом состояния формы при создании, который включает как значение, так и то, отключён ли элемент. Ключ value нельзя использовать без ключа disabled; оба необходимы для использования этого способа инициализации.

const ctrl = new FormControl({value: 'n/a', disabled: true});
console.log(ctrl.value);     // 'n/a'
console.log(ctrl.status);   // 'DISABLED'

Чтобы добавить синхронный валидатор (или массив синхронных валидаторов) в элемент, передайте его во втором аргументе. Асинхронные валидаторы также поддерживаются, но должны быть переданы отдельно в качестве третьего аргумента.

const ctrl = new FormControl('', Validators.required);
console.log(ctrl.value);     // ''
console.log(ctrl.status);   // 'INVALID'

См. его суперкласс, AbstractControl, для получения дополнительной информации о свойствах и методах.

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

Обзор класса

class FormControl extends AbstractControl {
  constructor(formState?: any, validator?: ValidatorFn|ValidatorFn[], asyncValidator?: AsyncValidatorFn|AsyncValidatorFn[])
  
  
  setValue(value: any, {onlySelf, emitEvent, emitModelToViewChange, emitViewToModelChange}?: {?: boolean,?: boolean,?: boolean,?: boolean}) : void
  patchValue(value: any, options?: {?: boolean,?: boolean,?: boolean,?: boolean}) : void
  reset(formState?: any, {onlySelf, emitEvent}?: {onlySelf?: boolean,?: boolean}) : void
  registerOnChange(fn: Function) : void
  registerOnDisabledChange(fn: (isDisabled: boolean) => void) : void
}

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

Конструктор

constructor(formState?: any, validator?: ValidatorFn|ValidatorFn[], asyncValidator?: AsyncValidatorFn|AsyncValidatorFn[])

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

setValue(value: any, {onlySelf, emitEvent, emitModelToViewChange, emitViewToModelChange}?: {
    onlySelf?: boolean,
    emitEvent?: boolean,
    emitModelToViewChange?: boolean,
    emitViewToModelChange?: boolean
  }) : void

Установите значение элемента формы в value.

Если onlySelf равно true, это изменение повлияет только на валидацию этого FormControl и не на его родительский компонент. По умолчанию это false.

Если emitEvent равно true, это изменение вызовет событие valueChanges в FormControl. По умолчанию это true (так как это происходит по умолчанию, переходя к updateValueAndValidity).

Если emitModelToViewChange равно true, представление будет уведомлено о новом значении через событие onChange. Это поведение по умолчанию, если emitModelToViewChange не указано.

Если emitViewToModelChange равно true, событие ngModelChange будет запущено для обновления модели. Это поведение по умолчанию, если emitViewToModelChange не указано.

patchValue(value: any, options?: {
    onlySelf?: boolean,
    emitEvent?: boolean,
    emitModelToViewChange?: boolean,
    emitViewToModelChange?: boolean
  }) : void

Заменяет значение элемента.

Эта функция функционально идентична setValue на этом уровне. Она существует для симметрии с patchValue в FormGroups и FormArrays, где она ведет себя иначе.

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

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

• он помечен как pristine
• он помечен как untouched
• значение установлено в null

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

Пример:

this.control.reset('Nancy');

console.log(this.control.value);  // 'Nancy'

ИЛИ

this.control.reset({value: 'Nancy', disabled: true});

console.log(this.control.value);  // 'Nancy'
console.log(this.control.status);  // 'DISABLED'

registerOnChange(fn: Function) : void

Регистрация обработчика событий изменения.

registerOnDisabledChange(fn: (isDisabled: boolean) => void) : void

Регистрация обработчика событий отключения.

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