Имя группы форм

Stable Directive

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

Синхронизирует вложенную FormGroup с элементом DOM.

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

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

Она принимает строковое имя вложенной FormGroup, которую нужно связать, и будет искать FormGroup с этим именем в экземпляре родительской FormGroup, переданной в FormGroupDirective.

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

Доступ к группе: Вы можете получить доступ к связанной FormGroup с помощью метода get. Пример: this.form.get('name').

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

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

Установка значения: Вы можете задать начальное значение для каждого дочернего элемента управления при создании FormGroup, или вы можете установить его программно позже, используя 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()">
      <p *ngIf="name.invalid">Name is invalid.</p>

      <div formGroupName="name">
        <input formControlName="first" placeholder="First name">
        <input formControlName="last" placeholder="Last name">
      </div>
      <input formControlName="email" placeholder="Email">
      <button type="submit">Submit</button>
    </form>

    <button (click)="setPreset()">Set preset</button>
`,
})
export class NestedFormGroupComp {
  form = new FormGroup({
    name: new FormGroup({
      first: new FormControl('Nancy', Validators.minLength(2)),
      last: new FormControl('Drew', Validators.required)
    }),
    email: new FormControl()
  });

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

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

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

  setPreset() { this.name.setValue({first: 'Bess', last: 'Marvin'}); }
}

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

• NgModule: ReactiveFormsModule

Обзор класса

class FormGroupName extends AbstractFormGroupDirective implements OnInit,  OnDestroy {
  constructor(parent: ControlContainer, validators: any[], asyncValidators: any[])
  
  
  name : string
}

Селекторы

[formGroupName]

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

Конструктор

constructor(parent: ControlContainer, validators: any[], asyncValidators: any[])

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

name : string

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