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

前端之家收集整理的这篇文章主要介绍了【AngularJS: Up & Running】第04章_表单、输入和服务前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1 ng-model的使用@H_502_2@

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

<input type="text" ng-model="ctrl.username"> You typed {{ctrl.username}}
angular.module('notesApp',[])
    .controller('MainCtrl',[function () {
        this.username = 'nothing';
}]);

2 表单的使用@H_502_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 使用数据绑定和模型@H_502_2@

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 表单状态及验证@H_502_2@

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中表单的状态属性

表单状态名 作用
$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 显示错误信息@H_502_2@

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 根据状态修改表单样式@H_502_2@

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与内嵌表单@H_502_2@

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
@H_502_1295@8 其他表单控件@H_502_2@
<!--多行文本输入框(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>

猜你在找的Angularjs相关文章