NgForm

Stable Directive

Что делает

Создаёт экземпляр верхнего уровня FormGroup и связывает его с формой для отслеживания агрегированного значения формы и состояния валидации.

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

Как только вы импортируете FormsModule, эта директива становится активной по умолчанию для всех тегов <form>. Вам не нужно добавлять специальный селектор.

Вы можете экспортировать директиву в локальную переменную шаблона, используя ngForm в качестве ключа (например: #myForm="ngForm"). Это необязательно, но полезно. Многие свойства из базового экземпляра FormGroup дублируются в самой директиве, поэтому ссылка на неё предоставит вам доступ к агрегированному значению и состоянию валидности формы, а также к свойствам взаимодействия с пользователем, таким как dirty и touched.

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

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

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

@Component({
  selector: 'example-app',
  template: `
    <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      <input name="first" ngModel required #first="ngModel">
      <input name="last" ngModel>
      <button>Submit</button>
    </form>

    <p>First name value: {{ first.value }}</p>
    <p>First name valid: {{ first.valid }}</p>
    <p>Form value: {{ f.value | json }}</p>
    <p>Form valid: {{ f.valid }}</p>
  `,
})
export class SimpleFormComp {
  onSubmit(f: NgForm) {
    console.log(f.value);  // { first: '', last: '' }
    console.log(f.valid);  // false
  }
}

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

• NgModule: FormsModule

Обзор класса

class NgForm extends ControlContainer implements Form {
  constructor(validators: any[], asyncValidators: any[])
  
  
  form : FormGroup
  ngSubmit : EventEmitter
  submitted : boolean
  formDirective : Form
  control : FormGroup
  path : string[]
  controls : {[key: string]: AbstractControl}
  addControl(dir: NgModel) : void
  getControl(dir: NgModel) : FormControl
  removeControl(dir: NgModel) : void
  addFormGroup(dir: NgModelGroup) : void
  removeFormGroup(dir: NgModelGroup) : void
  getFormGroup(dir: NgModelGroup) : FormGroup
  updateModel(dir: NgControl, value: any) : void
  setValue(value: {[key: string]: any}) : void
  onSubmit($event: Event) : boolean
  onReset() : void
  resetForm(value?: any) : void
}

Селекторы

form:not([ngNoForm]):not([formGroup])

ngForm

[ngForm]

Выходы

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

ngForm

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

Конструктор

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

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

form : FormGroup

ngSubmit : EventEmitter

submitted : boolean

formDirective : Form

control : FormGroup

path : string[]

controls : {[key: string]: AbstractControl}

addControl(dir: NgModel) : void

getControl(dir: NgModel) : FormControl

removeControl(dir: NgModel) : void

addFormGroup(dir: NgModelGroup) : void

removeFormGroup(dir: NgModelGroup) : void

getFormGroup(dir: NgModelGroup) : FormGroup

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

setValue(value: {[key: string]: any}) : void

onSubmit($event: Event) : boolean

onReset() : void

resetForm(value?: any) : void

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