GaramX

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

• 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

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

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

{{ name.className }}

로 확인 가능하다.

    <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에 접근 할 수 있다.

<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를 적용한다.