angular:forms

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- angular:forms [2023/09/25 06:29] – [Template Driven Forms (TDF)] taekgu
+++ angular:forms [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
@@ 줄 1: / 줄 1: @@
+===== 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를 적용한다.