【AngularJS: Up & Running】第04章_表单、输入和服务_angularjs中input一个please fill out this filed-CSDN博客

本文链接：https://blog.csdn.net/R3lish/article/details/52641549

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>

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

4.1 AngularJS中表单的状态属性

表单状态名	作用
$invalid	一旦有任何验证没有通过(包括必须验证、最小长度验证等)，AngularJS就会为表单设置$invalid属性
$valid	与$invalid状态正好相反，它表示所有验证都通过了
$pristine	AngularJS中所有的表单状态都是$pristine。它代表了用户是否已经输入或者修改过表单元素。可能的用途：当表单处于$pristine状态时，让reset按钮不可用(disabe)
$dirty	和$pristine正好相反，它表示用户已经修改了数据(用户可以撤销修改内容,但dirty属性已经被设置了)
$error	它为每一个表单提供了如下信息：哪些输入控件出现了错误以及错误类型。

4.2 AngularJS内置的验证器

验证器	作用
required	确保内容不为空，直到填入相应内容之前，这个字段始终被标记称$invalid
ng-required	required要求字段始终非空，而ng-required则不同，它根据表达式的返回值俩决定字段是否是必须的
ng-minlength	字符的最小长度
ng-maxlength	字符的最大长度
g-pattern	字段必须匹配某个正则表达式
type=”email”	字段必须是一个合法的邮件地址
type=”number”	字段必须是一个有效的数字，还可以通过指定min和max属性来限制数字的范围
type=”date”	如果浏览器支持，那么该字段将会显示成一个HTML日期选择器。如果不支持，那么默认情况下它会显示成一个文本输入框ng-model中所绑定的字段，将会是yyyy-mm-dd格式的日期对象，比如2016-09-23
type=”url”	字段必须是一个合法的URL链接地址

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

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

表单状态	对应的CSS class
$invalid	ng-invalid
$valid	ng-valid
$pristine	ng-pristine
$dirty	ng-dirty

6.2 输入控件状态CSS class

输入控件状态	对应的CSS class
$invalid	ng-invalid
$valid	ng-valid
$pristine	ng-pristine
$dirty	ng-dirty
required	ng-valid-required or ng-invalid-required
min	ng-valid-min or ng-invalid-min
max	ng-valid-max or ng-invalid-max
minlength	ng-valid-minlength or ng-invalid-minlength
maxlength	ng-valid-maxlength or ng-invalid-maxlength
pattern	ng-valid-pattern or ng-invalid-pattern
url	ng-valid-url or ng-invalid-url
email	ng-valid-email or ng-invalid-email
date	ng-valid-date or ng-invalid-date
number	ng-valid-number or ng-invalid-number

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>