【问题标题】:ng-required not working in directiveng-required 在指令中不起作用
【发布时间】:2015-01-26 04:04:13
【问题描述】:

我为表单中的双列表框创建了一个指令(类似于Bootstrap Dual Listbox)。该指令由 2 个列表框组成;值(左)和选项(右)。我想让指令与角度表单验证一起工作。如果值为空,则 form.$invalid 为真。

我尝试通过将自定义必需属性传递给指令来做到这一点。

我无法将“必需”属性应用于指令中的第一个选择框。

Example in jsfiddle

在指令模板中,以下表达式根本不起作用:

ng-required="dlRequired == true"

在示例中,当只有文本框有效时,保存按钮被启用。

我哪里错了?

【问题讨论】:

  • 你能详细说明你想要做什么效果吗?
  • 在示例中,我想创建能够提交表单所需的“双重列表”。在第一个列表框中包含项目的意义上是必需的。
  • 它可以提交表单,只有你在文本输入框中添加了必填属性,所以在你输入内容之前你看不到保存按钮...
  • 这就是你想要的吗? jsfiddle.net/rkwk4Lvm/5
  • 指令由2个列表框组成;值(左)和选项(右)。我希望这样做,以便提交表单需要项目值列表。在您的示例中看起来好像提交按钮处于活动状态,两个控件都为空?

标签: javascript angularjs angularjs-directive


【解决方案1】:

您在多选中使用 required 属性,如果设置了多个属性,似乎 required 将不起作用,除非您使用像 jquery.validate.js 这样的第三部分插件。

html5 的文档选择需要:

http://dev.w3.org/html5/spec-author-view/the-select-element.html#the-select-element

使用 jquery.validate.js 进行多选的示例:

<select name="msopt_name" class="form-control valid" multiple="multiple" data-msg-required="The input field is required." data-rule-required="true"><option value="1" selected="">GeeWorld</option> <option value="2" selected="">EdCo</option> <option value="3">GeeCorp</option> <option value="4">MacFarlane Inc</option> <option value="5">The Alliance</option> <option value="6">Sunny Vale Trailer Park</option> <option value="23">Test</option> <option value="24">Test</option> <option value="25">Test</option></select>

http://plnkr.co/edit/80lAX7uQN3Y87JvtjZ3N?p=preview

希望对你有帮助!

一些参考:

Can I apply the required attribute to <select> fields in HTML5?

【讨论】:

    猜你喜欢
    • 2018-06-06
    • 2015-12-03
    • 2017-11-14
    • 2018-02-18
    • 1970-01-01
    • 1970-01-01
    • 2016-07-14
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多