为什么表单不提交被angularJS中的无效输入字段阻止？

  • Z时代
  • 2024-01-10
  • 分类：问答

我想了解angularjs中的自定义表单验证。我跟着一个例子，它定义了一个指令，根据它是否包含'e'字符，将input文本字段设置为有效或无效。这似乎工作，因为CSS的样式根据有效性而改变。但是，即使字段无效，表单仍然允许按下提交按钮。下面的plunker显示了一个简单的例子。如果输入字段无效，它将绘制红色边框。为什么表单不提交被angularJS中的无效输入字段阻止？

Plunker：http://plnkr.co/edit/84NpBl9nmL5Qda96YF8d?p=preview

注意，如果文本字段为空的“添加”按钮将被禁用，这是由于required属性，但我想要的按钮也被禁用时，该字段为无效。我错过了什么？我想我希望required意味着“有效”而不是“不空”。

回答：

我已经想通了怎么做我想要的。首先，required只要求一些值存在。要验证控件禁用提交按钮，我需要使用ng-disabled并让它调用一个js函数来确定状态。

我的input字段的angular指令现在将变量设置为true或false，以记录是否禁用添加按钮，并且该变量是nb-disabled测试中检查的内容。它还会继续呼叫$setValidity，以便css仍将该字段标记为无效。

下面是一个新的plunker来显示更改。我还用ng-repeat来说明如果重复中有多种形式，它将如何工作。

Plunker：http://plnkr.co/edit/HYYPvFFARL1m0WBr3WrM?p=preview

的主要变化是修改myDirective改变scope.disableAdd[]值和ng-disabled="checkDisableAdd({{$index}})"属性提交按钮。

以上是 为什么表单不提交被angularJS中的无效输入字段阻止？ 的全部内容， 来源链接： utcz.com/qa/259413.html

回到顶部