• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

JavaScript 来源:Steve Francisco 3次浏览

我想了解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}})"属性提交按钮。


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)