===== Forms =====
Vital to business applications
Create an experience that guides the user e1fficiently and effectively through the workflow.
Developers
  * Data binding
  * Change tracking
  * Validation
  * Visual feedback
  * Error messages
  * Form submission

** Angular Forms **
//** Template Driven Forms **//
  * Heavy on the component template
//** Reactive Forms **//
  * Heavy on the component class
==== Template Driven Forms (TDF) ====
  * Easy to use and similar to Angular JS Forms
  * Two way data binding with ngModel
  * Bulky HTML and minimal component code
  * Automatically tracks the form and form elements state and validity
  * Unit testing is a challenge --> 브라우저
  * Readablility decreases with complex forms and validations
  * Suitable for simple scenarios
=== Track Control State and validity ===
<code javascript>
<input type="text" required #name class="form-control" name="userName" [(ngModel)]="userModel.name">
</code>
해쉬(#)이름에 의해서 사용가능하다.
적용되는 class는 <code>{{ name.className }}</code>로 확인 가능하다.

^State ^Class if true ^Class if false^
|The control has been visited.|ng-touched|ng-untouched|
|The control's value has changed.|ng-dirty|ng-pristine|
|The control's value value is valid.|ng-valid|ng-invalid|

=== ngModel properties ===
^Class  ^Property  ^
|ng-untouched  |untouched  |
|ng-touched  |touched  |
|ng-pristine  |pristine  |
|ng-dirty  |dirty  |
|ng-valid  |valid  |
|ng-invalid  |invalid  |

<code javascript>
    <div class="form-group">
      <label>Name</label>
      <input type="text" required #name="ngModel" class="form-control" name="userName" [(ngModel)]="userModel.name">
    </div>
    {{ name.className }}
    {{ name.touched }}
</code>
#name="ngModel"에 의해서 ngModel property에 접근 할 수 있다.

=== class property적용 ===
<code javascript>
<input type="text" required #name="ngModel" [class.is-invalid]="name.invalid && name.touched" class="form-control" name="userName" [(ngModel)]="userModel.name">
</code>
**[class.is-invalid]="name.invalid"**에 의해서 is-invalid를 적용한다.