О концепции ngForm и ngModel в управляемых шаблонами формах в угловых - PullRequest
Новая
       24

О концепции ngForm и ngModel в управляемых шаблонами формах в угловых

0 голосов
/ 09 декабря 2018

Здравствуйте. Недавно я приступил к угловой и ионной разработке.

Я понимаю, что интерполяция и привязка свойств - это передача данных из класса в шаблон, и что интерполяция поддерживает только строки, тогда как привязка свойств поддерживает все типы.

Связывание событий используется для передачи данных из шаблона в класс.

Двухстороннее связывание достигается с помощью foll.4 способа:

  1. С синтаксисом бананов ngModel: 
<input [(ngModel)]="username">
<p>Hello {{username}}!</p>
NgModel без бананового синтаксиса: 
<input [ngModel]="username" (ngModelChange)="username = $event">
<p>Hello {{username}}!</p>
Без ngModel: 
<input [value]="username" (input)="username = $event.target.value">
<p>Hello {{username}}!</p>

Или 

<input [value]="username" (input)="username = varTest.value" #varTest>
<p>Hello {{username}}!</p>
Мы можем реализовать пользовательскую двустороннюю привязку (без ngModel), при условии, что мы реализуем соответствующие функции: 
<custom-counter [(counter)]="someValue"></custom-counter>
<p>counterValue = {{someValue}}</p>

У нас также есть концепция ссылочных переменных шаблона.Когда вы объявляете это, скажем, в поле ввода, значение поля доступно в шаблоне с помощью интерполяции.Кроме того, если ngModel назначен переменной шаблона ref .. # varTref = "ngModel", то различные свойства элемента, такие как валидация, грязный, чистый, нетронутый, нетронутый, доступны в шаблоне с помощью интерполяции.Все это можно передать в файл класса кода, передав переменную шаблона ref, например, в событие щелчка кнопки, ИЛИ мы можем использовать концепцию ViewChild.

Мой вопрос касается концепции ngForms и ngModel в случаеформы (управляемые шаблоном формы):

  1. Мы используем <form #f="ngForm"..... И затем в каждом элементе ввода мы используем ngModel с именем, и это делает его доступным как свойство forms.value.fieldname.Не может ли быть достигнуто то же самое, просто используя ссылочную переменную шаблона и затем передавая ее в событие нажатия кнопки, таким образом имея доступ к элементам формы в коде?Тогда почему мы должны использовать концепцию ngForm?

  2. На уровне элемента мы используем ngModel.Это то же самое, что привязка атрибута или привязка события?Или это просто сделать элемент доступным для #f?Мы могли бы также использовать переменную ссылки на шаблон, чтобы добиться того же, не так ли?Чтобы добиться двухстороннего связывания, мы также используем здесь банановый синтаксис, так что зачем использовать ключевое слово ngModel на каждом уровне элемента в формах, управляемых шаблоном?

  3. Используется [(ngModel)] = varName - то же, что и запись [(ngModel)] name = varName?

Пожалуйста, мне нужна ясность в этом.Спасибо.

1 Ответ

0 голосов
/ 09 декабря 2018

Да, эти концепции могут поначалу сбивать с толку.Но некоторая информация, указанная выше в отношении двусторонней привязки, неверна:

двусторонняя привязка

[(ngModel)]="lastName"

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

Выше приведена краткая версия:

<input [ngModel]="lastName" (ngModelChange)="lastName = $event">

Односторонняя / привязка свойства

[ngModel]="lastName"

Интерфейс пользователя синхронизируется со значением свойства компонента.Это похоже на интерполяцию: {{lastName}}

Однократная привязка

ngModel="lastName"

Связывает только начальное значение свойства компонента ине изменится, если значение изменится.

Переменные ссылки на шаблон 

#lastNameVar="ngModel"    /* for a form model element eg input element*/
#f="ngForm"               /* for the form itself */

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

Например: 

  <div class="form-group row mb-2">
    <label class="col-md-2 col-form-label"
           for="lastNameId">Last Name</label>
    <div class="col-md-8">
      <input class="form-control"
             id="lastNameId"
             type="text"
             placeholder="Last Name (required)"
             required
             maxlength="50"
             [(ngModel)]="customer.lastName"
             name="lastName"
             #lastNameVar="ngModel"
             [ngClass]="{'is-invalid': (lastNameVar.touched || lastNameVar.dirty) && !lastNameVar.valid }" />
      <span class="invalid-feedback">
        <span *ngIf="lastNameVar.errors?.required">
          Please enter your last name.
        </span>
        <span *ngIf="lastNameVar.errors?.maxlength">
          The last name must be less than 50 characters.
        </span>
      </span>
    </div>
  </div>

Обратите внимание, как выше указано, что переменная ссылки на шаблон установлена ​​на #lastName, а затем использует ее для установки стиля (с помощью [ngClass]) и проверки коллекции ошибок для отображения соответствующего сообщения об ошибке.

Или для вашего примерас помощью формы вы можете проверить состояние формы, чтобы отключить кнопку Сохранить, например: 

      <button class="btn btn-primary"
              type="submit"
              [disabled]="!f.valid">
        Save
      </button>

Если вам не требуется доступ к состоянию формы в шаблоне, вам не нужнопеременная ссылки на шаблон.

Вы также можете передать переменную ссылки шаблона в компонент для доступа к значению или состоянию формы:

В шаблоне: 

<form novalidate
      (ngSubmit)="save(signupForm)"
      #signupForm="ngForm">

Inкомпонент: 

  save(customerForm: NgForm) {
    console.log('Saved: ' + JSON.stringify(customerForm.value));
  }

Вы могли бы вместо этого передавать в переменную ссылки шаблона каждого отдельного элемента управления, но почему?Поскольку вы добавляете элементы управления с течением времени, вам нужно помнить, чтобы всегда добавлять их в вызов метода.И вам придется проверять состояние каждого элемента управления, а не только общее состояние формы.Намного легче / лучше / понятнее просто передать ссылку на форму. 

<form novalidate
      (ngSubmit)="save(lastName, firstName, phone, email)">
...