Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

AngularJS form 指令


示例

只要必填输入字段为空,此表单的“有效状态”就不会被视为“true”

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>

<p>表单的有效状态为:</p>
<h1>{{myForm.$valid}}</h1>
亲自试一试 »

定义和用法

AngularJS 修改了 <form> 元素的默认行为。

AngularJS 应用中的表单被赋予了某些属性。这些属性描述了表单的当前状态。

表单具有以下状态

  • $pristine 尚未修改任何字段
  • $dirty 已修改了一个或多个字段
  • $invalid 表单内容无效
  • $valid 表单内容有效
  • $submitted 表单已提交

每个状态的值表示一个布尔值,要么为 true,要么为 false

如果未指定 action 属性,则 AngularJS 中的表单会阻止默认操作(即将表单提交到服务器)。


语法

<form name="formname"></form>

可以通过 name 属性的值来引用表单。



CSS 类

AngularJS 应用中的表单被赋予了某些。这些类可用于根据表单的状态对其进行样式设置。

添加了以下类

  • ng-pristine 尚未修改任何字段
  • ng-dirty 已修改了一个或多个字段
  • ng-valid 表单内容有效
  • ng-invalid 表单内容无效
  • ng-valid-key 每个验证一个。例如:ng-valid-required,当需要验证多个内容时很有用
  • ng-invalid-key 例如:ng-invalid-required

如果它们表示的值为 false,则会删除这些类。

示例

为未修改(原始)表单和已修改表单应用样式

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>
亲自试一试 »

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.