FormGroupDirective

Stable Directive

Что делает

Связывает существующий FormGroup с элементом DOM.

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

Данная директива принимает существующий экземпляр FormGroup. Затем она использует этот экземпляр FormGroup для сопоставления любых дочерних экземпляров FormControl, FormGroup и FormArray с дочерними директивами FormControlName, FormGroupName и FormArrayName.

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

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

Кроме того, вы можете прослушивать событие директивы ngSubmit для получения уведомления, когда пользователь инициировал отправку формы. Событие ngSubmit будет излучаться с оригинальным событием отправки формы.

Пример

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

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'}); }
}

npm пакет: @angular/forms

NgModule: ReactiveFormsModule

Обзор класса

class FormGroupDirective extends ControlContainer implements Form, 
  constructor(_validators: any[], _asyncValidators: any[])
  
  
  directives : FormControlName[]
  form : FormGroup
  ngSubmit : EventEmitter
  ngOnChanges(changes: SimpleChanges) : void
  submitted : boolean
  formDirective : Form
  control : FormGroup
  path : string[]
  addControl(dir: FormControlName) : FormControl
  getControl(dir: FormControlName) : FormControl
  removeControl(dir: FormControlName) : void
  addFormGroup(dir: FormGroupName) : void
  removeFormGroup(dir: FormGroupName) : void
  getFormGroup(dir: FormGroupName) : FormGroup
  addFormArray(dir: FormArrayName) : void
  removeFormArray(dir: FormArrayName) : void
  getFormArray(dir: FormArrayName) : FormArray
  updateModel(dir: FormControlName, value: any) : void
  onSubmit($event: Event) : boolean
  onReset() : void
  resetForm(value?: any) : void
}

Селекторы

[formGroup]

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

ngForm

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

Конструктор

constructor(_validators: any[], _asyncValidators: any[])

Подробное описание класса

directives : FormControlName[]

form : FormGroup

ngSubmit : EventEmitter

ngOnChanges(changes: SimpleChanges) : void

submitted : boolean

formDirective : Form

control : FormGroup

path : string[]

addControl(dir: FormControlName) : FormControl

getControl(dir: FormControlName) : FormControl

removeControl(dir: FormControlName) : void

addFormGroup(dir: FormGroupName) : void

removeFormGroup(dir: FormGroupName) : void

getFormGroup(dir: FormGroupName) : FormGroup

addFormArray(dir: FormArrayName) : void

removeFormArray(dir: FormArrayName) : void

getFormArray(dir: FormArrayName) : FormArray

updateModel(dir: FormControlName, value: any) : void

onSubmit($event: Event) : boolean

onReset() : void

resetForm(value?: any) : void

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