1 ng-model的使用

ng-model指令：进行数据的双向绑定

<input type="text" ng-model="ctrl.username"> You typed {{ctrl.username}}

angular.module('notesApp',[])
    .controller('MainCtrl',[function () {
        this.username = 'nothing';
}]);

2 表单的使用

<form ng-submit="ctrl.submit();">
    <input type="text" ng-model="ctrl.user.username">
    <input type="password" ng-model="ctrl.user.password">
    <input type="submit" value="submit">
</form>

var self = this;
self.submit = function () {
    console.log('User clicked submit with ',self.user);
};

3 使用数据绑定和模型

HTML:

<form ng-submit="ctrl.submit1();">
    <input type="text" ng-model="ctrl.username">
    <input type="password" ng-model="ctrl.password">
    <input type="submit" value="submit">
</form>
<form ng-submit="ctrl.submit2();">
    <input type="text" ng-model="ctrl.user.username">
    <input type="password" ng-model="ctrl.user.password">
    <input type="submit" value="submit">
</form>

JS:

var self = this;
self.submit1 = function () {
    //创建了一个代表用户的对象并发送给服务器
    var user = {username:self.username,password:self.password};
    console.log('First form submit with ',user);
};
self.submit2 = function () {
    console.log('Second form submit with ',self.user);
};

4 表单状态及验证

HTML

<form ng-submit="ctrl.submit();" name="myForm">
    <input type="text" ng-model="ctrl.user.username" required ng-minlength="4">
    <input type="password" ng-model="ctrl.user.password" required>
    <input type="submit" value="Submit" ng-disabled="myForm.$invalid"><!-- 通过表单名访问表单状态 -->
</form>

JS

angular.module('notesApp',[function () {
        var self = this;
        self.submit = function () {
            console.log('User clicked submit with ',self.user);
        };
    }]);

4.1 AngularJS中表单的状态属性

4.2 AngularJS内置的验证器

出了上述验证器之外，用户也可以编写自定义验证器。

5 显示错误信息

ng-show的使用

<form ng-submit="ctrl.submit();" name="myForm">
    <input type="text" name="uname" ng-model="ctrl.user.username" required ng-minlength="4">
    <span ng-show="myForm.uname.$error.required">
 This is a required field
 </span>
    <span ng-show="myForm.uname.$error.minlength">
 Minimum length required is 4
 </span>
    <span ng-show="myForm.uname.$invalid">
 This field is invalid
 </span>
    <input type="password" name="pwd" ng-model="ctrl.user.password" required>
    <span ng-show="myForm.pwd.$error.required">
 This is a required field
 </span>
    <input type="submit" value="Submit" ng-disabled="myForm.$invalid">
</form>

6 根据状态修改表单样式

6.1 表单状态CSS class

6.2 输入控件状态CSS class

6.3 不同方式高亮显示输入控件

HTML:

<form ng-submit="ctrl.submit();" name="myForm">
    <input type="text"
           class="username"
           name="uname"
           ng-model="ctrl.user.username"
           required
           ng-minlength="4">
    <input type="submit"
           value="Submit"
           ng-disabled="myForm.$invalid">
</form>

CSS:

<style> .username.ng-valid{ background-color: green; } .username.ng-dirty.ng-invalid-required{ background-color: red; } .username.ng-dirty.ng-invalid-minlength{ background-color: lightpink; } </style>

JS:

angular.module('notesApp',[])
            .controller('MainCtrl',[function () {
                var self = this;
                self.submit = function () {
                    console.log('User clicked submit with ',self.user);
                };
            }]);

7 ng-form与内嵌表单

AngularJS提供了ng-form指令，它与form非常相近，同时又提供了内嵌功能，这样一来，我们就能将表单中的一些字段组合起来，当作一个自快进行处理。

<form novalidate name="myForm">
    <input type="text"
           class="username"
           name="uname"
           ng-model="ctrl.user.username"
           required=""
           placeholder="Username"
           ng-minlength="4" />
    <input type="password"
           class="password"
           name="pwd"
           ng-model="ctrl.user.password"
           placeholder="Password"
           required="" />
    <ng-form name="profile">
        <input type="text"
               name="firstName"
               ng-model="ctrl.user.profile.firstName"
               placeholder="First Name"
               required>
        <input type="text"
               name="middleName"
               placeholder="Middle Name"
               ng-model="ctrl.user.profile.middleName">
        <input type="text"
               name="lastName"
               placeholder="Last Name"
               ng-model="ctrl.user.profile.lastName" required>
        <input type="date"
               name="dob"
               placeholder="Date Of Birth"
               ng-model="ctrl.user.profile.dob" required>
    </ng-form>
    <span ng-show="myForm.profile.$invalid">
        Please fill out the profile information
    </span>

    <input type="submit"
           value="Submit"
           ng-disabled="myForm.$invalid">
</form>

• 1 通过ng-form指令创建出子菜单，用户可以给该表单分配名称，用于获取它本身和它的状态
• 2 子表单的状态的既能直接通过 （子表单名.$valid ）访问，也能通过它的父表单访问（父表单名.子表单名.$invalid）
• 3 表单中的每一个元素都可以通过普通方式（表单名.firstName.$error.required）访问
• 4 子表单和内嵌表单会影响外部表单（myForm.$invalid是true，因为使用了required）

8 其他表单控件

<!--多行文本输入框(Textarea)-->
    <textarea ng-model="ctrl.user.address" required></textarea>
    <!--复选框(Checkbox)-->
    <input type="checkbox" ng-model="ctrl.user.agree" ng-true-value="YES" ng-false-value="NO">
    <!--单选框(RadioButton)-->
    <div ng-init="user = {gender:'female'}">
        <input type="radio" name="gender" ng-model="user.gender" value="male">
        <input type="radio" name="gender" ng-model="user.gender" value="female">
    </div>
    <!--下拉框(Combo Boxes/Drop-Downs)-->
    <div ng-init="location = 'India'">
        <select ng-model="location">
            <option value="USA">USA</option>
            <option value="India">India</option>
            <option value="Other">None of the above</option>
        </select>
    </div>