09-指令ng-model-CSS类

最新推荐文章于 2019-05-07 17:36:04 发布

jojo999888

最新推荐文章于 2019-05-07 17:36:04 发布

阅读量658

点赞数

CC 4.0 BY-SA版权

分类专栏： angularJS 文章标签： angularjs

本文链接：https://blog.youkuaiyun.com/gc_20160403/article/details/76034441

angularJS 专栏收录该内容

35 篇文章

订阅专栏

本文介绍Angular中如何使用ng-model指令来管理表单状态，并通过CSS样式反馈表单的验证情况。具体包括ng-model指令如何根据表单域的状态添加或移除如ng-empty、ng-valid等CSS类，以及如何通过这些类实现对输入框的有效性和修改状态的实时反馈。

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


<!--ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：

ng-model 指令根据表单域的状态添加/移除以下类：

    ng-empty
    ng-not-empty
    ng-touched
    ng-untouched
    ng-valid
    ng-invalid
    ng-dirty
    ng-pending
    ng-pristine

ng-invalid:未通过验证的表单

ng-valid:布尔型属性，它指示表单是否通过验证。如果表单当前通过验证，他将为true

ng-dirty:布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过

ng-touched:布尔值属性，表示用户是否和控件进行过交互

ng-pristine:布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过

-->
<!DOCTYPE html>
<html lang="en" ng-app="">
    <head>
        <meta charset="utf-8">
        <script src="js/angular.js"></script>
        <style>
            input.ng-invalid {
                background-color: lightblue;
            }
        </style>
    </head>
    <body>
        <form ng-app="" name="myForm">
            输入你的名字:
            <input name="myAddress" ng-model="text" required>
        </form>
    </body>
</html>