【问题标题】:Disable a button if at least one input field is empty using ngDisabled如果至少一个输入字段为空,则使用 ngDisabled 禁用按钮
【发布时间】:2014-10-02 13:48:20
【问题描述】:

如果字段不正确,我想阻止用户单击“注册”按钮。部分原因是必须填写某些字段。但是条件开始有点长了:

<button class="btn btn-success" ng-click="register()"
    ng-disabled="signInForm.$invalid || form.firstName.length==0 ||
    form.lastName.length==0 || form.email.length==0 ||
    form.password.length==0 || form.passwordBis.length==0">Register</button>

如何简化?

【问题讨论】:

  • 您只需为所有输入提供required 属性并执行&lt;button class="btn btn-success" ng-click="register()" ng-disabled="signInForm.$invalid&gt;Register&lt;/button&gt;

标签: angularjs


【解决方案1】:

我认为您需要为表单中的输入字段提供required 属性,因此在表单中填写字段之前signInForm 将无效。同样,您也可以在输入上提供其他验证属性。

例子:-

  <input type="text" ng-model="firstName" name="firstName" required />
  <input type="text" ng-model="lastName" name="lastName" required />
  <input type="email" ng-model="email" name="email" required />
  ...
  ...
  <button class="btn btn-success" ng-click="register()" 
            ng-disabled="signInForm.$invalid">Register</button>

【讨论】:

  • 看起来你是对的:jsfiddle.net/mgmp6L0b 但在我的情况下它不起作用......看起来我没有使用相同的框架......我有 AngularJS v1.2.25,并且电子邮件:“toto@to”在我的代码中有效,而不是在上面的 JSFiddle 示例中。我的代码中还需要不会改变行为...有什么想法吗?
  • 我无法访问小提琴,您可以粘贴到 plunkr 中吗?我知道电子邮件验证器模式曾经有一个错误......
  • 我明白你在说什么,你的问题更多地与 html5 电子邮件验证和角度有关。如果你在官方文档中的演示中也这样做,你会看到同样的结果。 docs.angularjs.org/api/ng/input/input%5Bemail%5D您可以通过提供ng-pattern来使用自己的模式
  • 好的,很有趣...在 plunker 中,电子邮件验证就像在我的程序中一样工作:plnkr.co/edit/YcjlZpUwOgfVC0KyEQoM?p=preview 无论如何,所需的东西有效,我在某些输入 ng-class 中的按钮上方有冲突可能使事情无法正常工作。我没有注意到任何错误,在使用角度指令时很难猜测出什么问题,控制台上没有错误。
  • 我已经尝试在网上找到一个好的电子邮件模式,但这似乎是一个复杂的问题,对此没有唯一的答案。 =/
猜你喜欢
  • 2022-01-05
  • 1970-01-01
  • 1970-01-01
  • 2013-01-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多