angular:forms

차이

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

차이 보기로 링크

--- angular:forms [2019/01/16 04:11] – [Template Driven Forms (TDF)] taekgu
+++ angular:forms [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
@@ 줄 23: / 줄 23: @@
   * 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를 적용한다.

angular/forms.1547611886.txt.gz · 마지막으로 수정됨: 2025/04/15 10:05 (바깥 편집)