對于Angular2.0 的Form表單中的隱藏和驗證，個人覺得還是挺有意思的。

1.通過ngModel 跟蹤修改狀態與驗證。

在表單中使用 ngModel 可以獲得更多的控制權，包括一些常用的驗證。

ngModel 不僅僅可以跟蹤狀態（表單中各個控件的狀態）還可以用特定的Angular CSS 類來更新控件，以表達當前的狀態

（如顯示和隱藏）

ng-touched：控件已被訪問過的css 類； ng-untouched 為沒有被訪問過的CSS 類

ng-dirty ：控件值已經發生變化，ng-pristine 沒有

ng-valid 控件值有效；ng-invalid 無效

如下，我們可以通過這種方式對class name 進行監控

先設置css

.ng-valid[required], .ng-valid.required {border-left: 5px solid #42A948; /* green */ }.ng-invalid:not(form) {border-left: 5px solid #a94442; /* red */ }

然后通過param.className監控

<input type="text" class="form-control" id="name"required[(ngModel)]="model.name" name="name"#param > <br> current class name :{{param.className}}

?

2.顯示和隱藏驗證提示信息

<label for="name">Name</label><input type="text" class="form-control" id="name"required[(ngModel)]="model.name" name="name"#name="ngModel" ><div [hidden]="name.valid || name.pristine"class="alert alert-danger">Name is required</div>

需要注意的是，我們在input 標簽中添加了個#name 變量。然后將ngModel 賦值給這個參數。

后年的name.valid 和 name.pristine 中的name 是這個參數變量 name

為什么是 “ngModel”？ 指令的 exportAs 屬性告訴 Angular 如何鏈接模板引用變量到指令。 這里把name設置為ngModel是因為ngModel指令的exportAs屬性設置成了 “ngModel“

3.ngSubmit 和ngForm

ngForm 是Angular 自己創建的指令，并附加到form 標簽上。

他是為了給form 元素擴充額外的特性。?它持有通過ngModel指令和name屬性為各個元素創建的那些控件，并且監視它們的屬性變化，包括有效性。

它還有自己的valid屬性，只有當其中所有控件都有效時，它才有效。

<div [hidden]="submitted"><h1>Form</h1><form (ngSubmit)="onSubmit()" #heroForm="ngForm"><div class="form-group"><label for="name">Name</label><input type="text" class="form-control" id="name" requiredname ="name" [(ngModel)]="model.name" #name="ngModel"><div [hidden]="name.valid || name.pristine" class="alert alert-danger">Name is required</div></div><div class="form-group"><label for="alterEgo">Alter Ego</label><input type="text" class="form-control" id="alterEgo"[(ngModel)]="model.alterEgo" name ="alterEgo"></div><div class="form-group"><label for="power">Hero Power</label><select id="power" class="form-control" required[(ngModel)]="model.power" name ="power"><option *ngFor ="let pow of powers" [value]="pow">{{pow}}</option></select></div><button class="btn btn-default" [disabled] ="!heroForm.form.valid" >Submit</button></form></div>

如上code 將ngForm 賦值給一個變量，這樣這個變量就代表了這個form的整體，并且可以通過這個變量來獲取form 的屬性。

?

轉載于:https://www.cnblogs.com/taoyoung/p/ngForm.html

總結

以上是生活随笔為你收集整理的Angular2.0 基础： Form的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。