FormControlDirective — Angular

Синхронизирует отдельный экземпляр FormControl с элементом управления формы.

API

class FormControlDirective extends NgControl implements OnChanges ,OnDestroy {
  constructor(validators: (ValidatorFn | Validator)[], asyncValidators: (AsyncValidatorFn | AsyncValidator)[], valueAccessors: ControlValueAccessor[], _ngModelWarningConfig: string | null, callSetDisabledState?: SetDisabledStateOption | undefined, renderer?: Renderer2 | undefined, injector?: Injector | undefined): FormControlDirective;
  @Input('formControl') form: FormControl<any>;
  @Input('disabled') set isDisabled(value: boolean);
  @Input('ngModel') model: any;
  @Output('ngModelChange') update: EventEmitter<any>;
  readonly path: string[];
  readonly control: FormControl<any>;
  viewToModelUpdate(newValue: any): void;
  override name: string | number | null;
  override valueAccessor: ControlValueAccessor | null;
  protected override isCustomControlBased: boolean;
  protected override readonly selectedValueAccessor: ControlValueAccessor | null;
  protected override parseErrorsValidator: ValidatorFn | null;
  protected override customControlBindings: { value?: unknown; disabled?: boolean | undefined; touched?: boolean | undefined; dirty?: boolean | undefined; valid?: boolean | undefined; invalid?: boolean | undefined; pending?: boolean | undefined; required?: boolean | undefined; errors?: ValidationErrors | null | undefined; } | null;
  protected override setupCustomControl(): void;
  protected override ngControlUpdate(host: ControlDirectiveHost<undefined>, bindRequired: boolean): void;
  protected override readonly shouldBindRequired: boolean;
  protected override removeParseErrorsValidator(control: AbstractControl<any, any, any> | null | undefined): void;
  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

FormControlDirective

@paramvalidators(ValidatorFn | Validator)[]

@paramasyncValidators(AsyncValidatorFn | AsyncValidator)[]

@paramvalueAccessorsControlValueAccessor[]

@param_ngModelWarningConfigstring | null

@paramcallSetDisabledStateSetDisabledStateOption | undefined

@paramrendererRenderer2 | undefined

@paraminjectorInjector | undefined

@returnsFormControlDirective

form

FormControl<any>

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

isDisabled

boolean

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

model

any

@deprecated

начиная с v6

update

EventEmitter<any>

@deprecated

начиная с v6

path

string[]

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

control

FormControl<any>

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

viewToModelUpdate

void

Устанавливает новое значение модели представления и генерирует событие ngModelChange.

@paramnewValueany

Новое значение модели представления.

@returnsvoid

name

string | number | null

Имя элемента управления

valueAccessor

ControlValueAccessor | null

Аксессор значения элемента управления

isCustomControlBased

boolean

selectedValueAccessor

ControlValueAccessor | null

parseErrorsValidator

ValidatorFn | null

Функция-валидатор, возвращающая текущие ошибки разбора.

customControlBindings

{ value?: unknown; disabled?: boolean | undefined; touched?: boolean | undefined; dirty?: boolean | undefined; valid?: boolean | undefined; invalid?: boolean | undefined; pending?: boolean | undefined; required?: boolean | undefined; errors?: ValidationErrors | null | undefined; } | null

Отслеживает последние связанные значения, чтобы избежать ненужных обновлений FVC.

setupCustomControl

void

@returnsvoid

ngControlUpdate

void

@paramhostControlDirectiveHost<undefined>

@parambindRequiredboolean

@returnsvoid

shouldBindRequired

boolean

Следует ли элементу управления привязывать свойство required (в режиме пользовательского элемента управления).

Может быть переопределено подклассами, которые обрабатывают required иначе.

removeParseErrorsValidator

void

@paramcontrolAbstractControl<any, any, any> | null | undefined

@returnsvoid

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'

Описание

Синхронизирует отдельный экземпляр FormControl с элементом управления формы.

Обратите внимание: поддержка использования входного свойства ngModel и события ngModelChange с директивами реактивных форм объявлена устаревшей в Angular v6 и будет удалена в одной из будущих версий Angular.

Экспортируется из

ReactiveFormsModule

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

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

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

@Component({
  selector: 'example-app',
  template: `
    <input [formControl]="control" />

    <p>Value: {{ control.value }}</p>
    <p>Validation status: {{ control.status }}</p>

    <button (click)="setValue()">Set value</button>
  `,
  standalone: false,
})
export class SimpleFormControl {
  control: FormControl = new FormControl('value', Validators.minLength(2));

  setValue() {
    this.control.setValue('new value');
  }
}