angular:forms

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

<input type="text" required #name class="form-control" name="userName" [(ngModel)]="userModel.name">

해쉬(#)이름에 의해서 사용가능하다. 적용되는 class는

{{ name.className }}

로 확인 가능하다.

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

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

#name=“ngModel”에 의해서 ngModel property에 접근 할 수 있다.

class property적용

<input type="text" required #name="ngModel" [class.is-invalid]="name.invalid && name.touched" class="form-control" name="userName" [(ngModel)]="userModel.name">

[class.is-invalid]=“name.invalid”에 의해서 is-invalid를 적용한다.