Директива FormControlDirective

Stable Directive

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

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

Другими словами, эта директива гарантирует, что любые значения, записанные в экземпляр FormControl программно, будут записаны в элемент DOM (модель -> представление). И наоборот, любые значения, записанные в элемент DOM через пользовательский ввод, будут отражены в экземпляре FormControl (представление -> модель).

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

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

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

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

Установка значения: Вы можете передать начальное значение при создании FormControl или установить его программно позже с помощью setValue или patchValue.

Прослушивание изменения значения: Если вы хотите прослушивать изменения значения управления, вы можете подписаться на событие valueChanges. Также вы можете прослушивать statusChanges, чтобы получать уведомления о пересчете статуса валидации.

Пример

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>
  `,
})
export class SimpleFormControl {
  control: FormControl = new FormControl('value', Validators.minLength(2));

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

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

• NgModule: ReactiveFormsModule

Обзор класса

class FormControlDirective extends NgControl implements OnChanges {
  constructor(validators: Array<Validator|ValidatorFn>, asyncValidators: Array<Validator|AsyncValidatorFn>, valueAccessors: ControlValueAccessor[])
  
  
  viewModel : any
  form : FormControl
  model : any
  update : EventEmitter
  isDisabled 
  ngOnChanges(changes: SimpleChanges) : void
  path : string[]
  validator : ValidatorFn
  asyncValidator : AsyncValidatorFn
  control : FormControl
  viewToModelUpdate(newValue: any) : void
}

Селекторы

[formControl]

Экспортировано как

ngForm

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

Конструктор

constructor(validators: Array<Validator|ValidatorFn>, asyncValidators: Array<Validator|AsyncValidatorFn>, valueAccessors: ControlValueAccessor[])

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

viewModel : any

form : FormControl

model : any

update : EventEmitter

isDisabled

ngOnChanges(changes: SimpleChanges) : void

path : string[]

validator : ValidatorFn

asyncValidator : AsyncValidatorFn

control : FormControl

viewToModelUpdate(newValue: any) : void

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