NgModel

Stable Directive

Что делает

Создаёт экземпляр FormControl из модели домена и привязывает его к элементу управления формой.

Экземпляр FormControl будет отслеживать значение, взаимодействие пользователя и состояние валидации элемента управления и синхронизировать представление с моделью. Если используется в родительской форме, директива также зарегистрирует себя в форме как управляющий элемент.

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

Эта директива может использоваться сама по себе или как часть большей формы. Всё, что вам нужно, это селектор ngModel для её активации.

Она принимает модель домена в качестве необязательного @Input. Если у вас есть односторонняя привязка к ngModel с синтаксисом [], изменение значения модели домена в классе компонента установит значение в представлении. Если у вас есть двусторонняя привязка с синтаксисом [()] (также известная как синтаксис «банановой коробки»), значение в пользовательском интерфейсе всегда будет синхронизироваться обратно с моделью домена в вашем классе.

Если вы хотите проверить свойства связанного FormControl (например, состояние валидности), вы также можете экспортировать директиву в локальную переменную шаблона, используя ngModel в качестве ключа (например: #myVar="ngModel"). Затем вы можете получить доступ к элементу управления, используя свойство директивы control, но большинство необходимых свойств (например, valid и dirty) будут переданы элементу управления, поэтому вы можете получить к ним доступ напрямую. Полный список свойств, доступных напрямую, представлен в AbstractControlDirective.

Ниже приведён пример простого автономного элемента управления, использующего ngModel:

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

@Component({
  selector: 'example-app',
  template: `
    <input [(ngModel)]="name" #ctrl="ngModel" required>

    <p>Value: {{ name }}</p>
    <p>Valid: {{ ctrl.valid }}</p>

    <button (click)="setValue()">Set value</button>
  `,
})
export class SimpleNgModelComp {
  name: string = '';

  setValue() { this.name = 'Nancy'; }
}

При использовании ngModel внутри тегов <form>, вам также необходимо указать атрибут name, чтобы элемент управления мог быть зарегистрирован в родительской форме под этим именем.

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

Если вам необходимо заполнить начальные значения в вашей форме, использование односторонней привязки для ngModel обычно достаточно, если вы используете значение экспортированной формы, а не значения модели домена при отправке.

Рассмотрим пример использования ngModel в форме:

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
  }
}

Для ознакомления с примерами ngModel с различными типами элементов управления формой, см.:

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

пакет npm: @angular/forms

NgModule: FormsModule

Обзор класса

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

Селекторы

[ngModel]:not([formControlName]):not([formControl])

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

ngModel

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

Конструктор

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

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

viewModel : any

name : string

isDisabled : boolean

model : any

options : {name?: string, standalone?: boolean}

update : EventEmitter

ngOnChanges(changes: SimpleChanges)

ngOnDestroy() : void

control : FormControl

path : string[]

formDirective : any

validator : ValidatorFn

asyncValidator : AsyncValidatorFn

viewToModelUpdate(newValue: any) : void

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