Angular2.0 基础： Form

对于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" required

                       name ="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 的属性。

巴特西

Angular2.0 基础： Form

最新文章

热门文章