“required”和“ng-required”有什么区别？

Question

required 和 ng-required (表单验证) 有什么区别？

- TidharPeer

Answer 1

AngularJS表单元素查找required属性来执行验证功能。ng-required允许您根据布尔测试设置required属性（例如，仅在字段A具有特定值时要求字段B - 比如说，学生编号必填 - 如果您选择“学生”作为选项）

例如，<input required>和<input ng-required="true">本质上是相同的。

如果您想知道为什么是这样（而不只是使用<input required="true">或<input required="false">），那是由于HTML的限制 - required属性没有关联的值 - 仅存在意味着（按照HTML标准）该元素是必填的 - 因此Angular需要一种设置/取消设置必填值的方式（required="false"将是无效的HTML）

- Tiago Roldão

---

我该如何分别删除ng-required？因为我尝试了一些jQuery的方法，但没有成功。 - themhz

我不确定我理解这个问题。实际上，您从不使用ng-required =“true”，而是使用ng-required =“scopedVariable”或ng-required =“scopeTruthTest（）”，变量/函数的值决定元素是否必填。永远不要在Angular应用程序中使用jQuery来操作这些内容，否则您将获得不可预测的结果！ - Tiago Roldão

值得一提的是，ng-required 显示了一个默认的工具提示样式错误消息，即“此字段为必填项”，这并不总是理想的。我正在寻找一种关闭它的方法。 - Adam Spence

实际上并没有。不确定，但我认为你所指的是HTML5验证，这是由大多数现代浏览器自动执行的。如果您想控制此过程（禁用浏览器的操作），可以添加属性novalidate：<form method="post" action="/foo" novalidate>。再次说明，这是一个HTML5属性，与AngularJS无关。 - Tiago Roldão

我本来以为当 ng-required 指向作用域/控制器变量时，Angular 会监视它的变化并相应地设置所需的属性。而对于简单 HTML 的 required 属性，您没有那种灵活性。不是吗？还有，在同一主题上，ng-attr-required 又如何呢？它和 ng-required 完全相同吗？ - AsGoodAsItGets

Answer 2

我想为 tiago的回答 制作一个插件：

假设你正在使用 ng-show 隐藏元素，并同时添加 required 属性：

<div ng-show="false">
    <input required name="something" ng-model="name"/>
</div>

会抛出一个类似以下的错误：

一个名称为''的无效表单控件是无法聚焦的

这是因为你不能在hidden元素上强制执行required验证。使用ng-required可以更轻松地有条件地应用必填项验证，非常棒！

- I_Debug_Everything

---

这是一个不错的建议，你还可以使用 ng-if 代替 ng-show/ng-hide 来避免潜在的问题。 - jkjustjoshing

这应该是被接受的答案。如果您有隐藏元素（ng-show="false"），则ng-required="true"和正如本答案所述的'required'之间存在差异，我们因此遇到了麻烦。 - Ivan Krivyakov

Answer 3

HTML属性 required="required" 是一种声明，告诉浏览器该字段是必填的，以使表单有效。（使用 required 等同于 XHTML 表单中的 required="required"）

Angular 属性 ng-required="yourCondition" 意味着 'isRequired(yourCondition)' 并根据您的条件为您动态地设置 HTML 属性。

此外，请注意HTML 版本容易令人感到困惑，不可能编写条件语句如 required="true" 或 required="false"，只有出现该属性才会起作用（出现即为真）！这就是 Angular 在ng-required方面帮助您的地方。

- Christophe Roussy

---

是的，遗憾的是浏览器不允许输入true/false，可能被认为太过技术性了... - Christophe Roussy