# Директива NgForm в Angular

Для корректной работы с формой, необходимо обернуть все ее элементы в специальный тег `<form>`. В этом случае все они будут представлять собой единое целое. В Angular есть специальная директива `NgForm`, которая создает объект `FormGroup`. Данный объект привязывается к форме для отслеживания всех ее состояний, а также для управления валидацией.

Директива `NgForm` применяется в теге формы следующим образом:

`<form #myForm="ngForm">`

Давайте применим директиву `NgForm` в главном компоненте проекта. Для это сначала импортируем ее:

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

В классе `AppComponent` зададим свойства `name` и `email`. Также объявим функцию `submit`, принимающую параметром свойство `form` типа `NgForm`. Пусть функция будет выводить объект с формой в консоль браузера:

`export class AppComponent { name: string = ''; email: string = ''; submit(form: NgForm) { console.log(form); } }`

Теперь переходим в HTML-шаблон и прописываем в форме переменную `#myForm`, которая в качестве значения примет объект `ngForm`. Отключаем кнопку с помощью атрибута `disabled`, чтобы предотвратить ее случайное нажатие. И привязываем к ней функцию `submit` из главного компонента. После формы сделаем два дива для вывода информации о пользователе:

`<form #myForm="ngForm" novalidate> <div class="form-group"> <label>Name</label> <input class="form-control" name="name" [(ngModel)]="name" required /> </div> <div class="form-group"> <label>Email</label> <input class="form-control" name="email" ngModel required email /> </div> <div class="form-group"> <button [disabled]="myForm.invalid" class="btn btn-default" (click)="submit(myForm)">Confirm</button> </div> </form> <div>Name: {{myForm.value.name}}</div> <div>Email: {{myForm.value.email}}</div>`
↑