FormControlName

Stable Directive

Что делает

Синхронизирует FormControl в существующем FormGroup с элементом управления формой по имени.

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

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

Эта директива предназначена для использования с родительской FormGroupDirective (селектор: [formGroup]).

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

Доступ к элементу управления: Вы можете получить доступ к FormControl, связанному с этой директивой, используя метод get. Пример: this.form.get('first');

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

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

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

Пример

В этом примере мы создаем элементы управления формой для имени и фамилии.

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

@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <div *ngIf="first.invalid"> Name is too short. </div>

      <input formControlName="first" placeholder="First name">
      <input formControlName="last" placeholder="Last name">

      <button type="submit">Submit</button>
   </form>
   <button (click)="setValue()">Set preset value</button>
  `,
})
export class SimpleFormGroup {
  form = new FormGroup({
    first: new FormControl('Nancy', Validators.minLength(2)),
    last: new FormControl('Drew'),
  });

  get first(): any { return this.form.get('first'); }

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

  setValue() { this.form.setValue({first: 'Carson', last: 'Drew'}); }
}

Чтобы увидеть примеры formControlName с различными типами элементов управления формой, см.:

• Радиокнопки: RadioControlValueAccessor
• Выпадающие списки: SelectControlValueAccessor

пакет npm: @angular/forms

NgModule: ReactiveFormsModule

Обзор класса

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

Селекторы

[formControlName]

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

Конструктор

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

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

name : string

model : any

update : EventEmitter

isDisabled

ngOnChanges(changes: SimpleChanges)

ngOnDestroy() : void

viewToModelUpdate(newValue: any) : void

path : string[]

formDirective : any

validator : ValidatorFn

asyncValidator : AsyncValidatorFn

control : FormControl

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