Angular表单

最新推荐文章于 2020-09-29 18:47:08 发布

不止三岁

最新推荐文章于 2020-09-29 18:47:08 发布

阅读量199

点赞数

分类专栏：前端 AngularJS

本文链接：https://blog.youkuaiyun.com/YYece/article/details/102778482

版权

前端同时被 2 个专栏收录

29 篇文章

订阅专栏

AngularJS

11 篇文章

订阅专栏

本文介绍了Angular表单的使用，包括简单表单创建、CSS类应用、表单和控件状态绑定、自定义更新触发器、非立即更新、自定义验证以及如何修改内置验证器。此外，还探讨了如何实现自定义表单控件，并提供了多个参考资料链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

绑定到表单和控制状态

表单是FormController的实例，可以使用控件的name属性将表单实例可选的发布到scope中

同样，具有输入控制ngModel指令持有的实例NgModelController。可以使用name输入控件上的属性将此类控件实例发布为表单实例的属性。name属性指定表单实例上属性的名称。

自定义更新触发器

默认情况下，input onChange就会触发更新和表单验证，可以使用ng-model-options指令覆盖此行为

<input type="text" ng-model="user.name" ng-model-options="{ updateOn: 'blur' }" /></label><br />

非立即更新

 <input type="text" ng-model="user.name" ng-model-options="{ debounce: 250 }" /></label><br />

自定义验证

AngularJS提供了最常见的HTML5基本输入类型（text、email、radio等），以及用于验证的一些指令：

required：确保字段必需
ng-required：确保字段必需，与required不同的是，我们可以对ng-required赋值
ng-pattern：指定正则表达式对字段进行有效性检查
ng-maxlength ：规定字段的最大长度
ng-minlength：规定字段的最小长度
type=“email” 输入字段必须为邮箱
type=“number” 输入字段必须为数字
type=“date” 如果浏览器支持，显示一个日期选择器，否则作为一个文本输入
type=“url” 输入字段必须为url

除了AngularJS自带的验证器，你也可以将自己的验证功能添加到$validators对象上

修改内置验证器

由于AngularJS本身使用$validators，因此您可以在需要时轻松替换或删除内置验证器。以下示例显示了如何从自定义指令覆盖电子邮件验证器，以便它要求存在特定的顶级域。请注意，您也可以使用进一步限制验证。input[email]、example.com、ng-pattern

实施自定义表单控件（使用ngModel）

参考

https://docs.angularjs.org/api/ng/type/form.FormController
https://segmentfault.com/a/1190000009652980
https://www.cnblogs.com/mayufo/p/6113612.html
https://blog.youkuaiyun.com/chelen_jak/article/details/81486240
https://www.cnblogs.com/mysky7511/p/6646994.html
https://juejin.im/entry/590833d0da2f60005d14a662
https://docs.angularjs.org/guide/forms