Как директива FormGroup используется в управляемых шаблонами формах?

Question

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

Answer 1

Формы на основе шаблонов: FormGroup

В формах на основе шаблонов Angular автоматически связывается с директивой FormGroup при использовании в приложении тега <form>.

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

 <button type="submit"
         [disabled]="!signupForm.valid">
   Save
  </button>

У вас нет есть определить ссылочную переменную шаблона для формы ... только если вам это нужно, как показано в примере button выше.

Формы на основе шаблона: ngModel

Вы используете ngModel для двусторонней привязки элемента ввода в форме со свойством в компоненте.В приведенном ниже примере мы связываем элемент input со свойством customer.firstName в компоненте.

с помощью ngModel и , устанавливая атрибут name, Angular автоматически определит FormControl для элемента управления и добавит его к FormGroup

Здесь снова мы можем использовать переменную ссылки на шаблон(Обозначается #) для ссылки на FormControl и доступа к состоянию элемента управления, например, к касаниям, ошибкам или ошибкам проверки.

Это часто используется для отображения сообщения об ошибке проверки, например:

<span *ngIf="firstNameVar.errors">
  Please enter your first name.
</span>