【AngularJS: Up & Running】第04章_表单、输入和服务

来源：互联网发布：富士康跳樓事件知乎编辑：程序博客网时间：2024/06/08 09:55

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>

0 0