NgModelGroup

Stable Directive

Что делает

Создает и привязывает экземпляр FormGroup к элементу DOM.

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

Эта директива может использоваться только как дочерний элемент NgForm (или, другими словами, внутри <form> тегов).

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

Передайте имя, которое вы хотите дать этой подгруппе, и оно станет ключом для подгруппы в полном значении формы. Вы также можете экспортировать директиву в локальную переменную шаблона, используя ngModelGroup (например: #myGroup="ngModelGroup").

import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form #f="ngForm" (ngSubmit)="onSubmit(f)">
      <p *ngIf="nameCtrl.invalid">Name is invalid.</p>

      <div ngModelGroup="name" #nameCtrl="ngModelGroup">
        <input name="first" [ngModel]="name.first" minlength="2">
        <input name="last" [ngModel]="name.last" required>
      </div>

      <input name="email" ngModel> 
      <button>Submit</button>
    </form>

    <button (click)="setValue()">Set value</button>
  `,
})
export class NgModelGroupComp {
  name = {first: 'Nancy', last: 'Drew'};

  onSubmit(f: NgForm) {
    console.log(f.value);  // {name: {first: 'Nancy', last: 'Drew'}, email: ''}
    console.log(f.valid);  // true
  }

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

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

• NgModule: FormsModule

Обзор класса

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

Селекторы

[ngModelGroup]

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

ngModelGroup

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

Конструктор

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

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

name : string

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