Angular表单 | 易学教程

Simple form

 <form novalidate class="simple-form">
        <label>Name:<input type="text" ng-model="user.name"/> </label><br>
        <label>E-mail:<input type="email" ng-model="user.email"/> </label><br>
        <input type="button" ng-click="reset()" value="Reset"/>
        <input type="button" ng-click="update(user)" value="Save"/>
        <pre>user = {{user | json}}</pre>
        <pre>master = {{master | json}}</pre>
    </form>

请注意，该选项novalidate用于禁用浏览器的本机表单验证。

ng-model除非通过输入字段的验证，否则不会设置值。例如：类型的输入email必须具有形式的值user@domain。

使用CSS类

像 AngularJS 中一样，Angular 会自动把很多控件属性作为 CSS 类映射到控件所在的元素上。你可以使用这些类来根据表单状态给表单控件元素添加样式。目前支持下列类：

.ng-valid：模型有效
.ng-invalid：模型无效
.ng-pending：任何$asyncValidators未实现
.ng-pristine：控件尚未与之交互
.ng-dirty：控件已经与之交互
.ng-untouched：控件尚未失去焦点
.ng-touched：控件已经失去焦点

用法

 <form novalidate class="simple-form" class="css-form">
        <label>Name:<input type="text" ng-model="user.name" required /> </label><br>
        <label>E-mail:<input type="email" ng-model="user.email" required /> </label><br>
     
    </form>
<style type="text/css">
        .css-form input.ng-invalid.ng-touched {
            background-color: #FA787E;
        }

        .css-form input.ng-valid.ng-touched {
            background-color: #78FA89;
        }
    </style>