Question

我正在尝试检查2个输入字段中是否满足4个条件中的1个，以便在ng-disabled指令中使用AngularJS表达式启用“保存”按钮。

以下代码仅在满足前两个条件时才启用“保存”按钮。因此，如果用户在电子邮件输入字段中输入任何文本，从而使其成为$dirty和$valid，则“保存”按钮将变为启用状态。但是，如果用户在用户名输入字段中输入任何文本，则“保存”按钮将保持禁用状态。

如何才能看到最后两个条件？

<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>
  <label>Username</label>
  <input type="text" name="username" ng-model="user.name" required>
  <label>Email</label>
  <input type="text" name="email" ng-model="user.email" required>
  <button type="submit" ng-disabled="userForm.email.$pristine || userForm.email.$invalid || userForm.username.$pristine || userForm.username.$invalid">Save</button>
</form>

更新1

我最后添加了2个条件。它现在几乎完美地运作了。

当页面加载时，默认情况下禁用“保存”按钮，因为两个字段均为$prisitine。如果我删除或添加字符到用户名或电子邮件字段，则“保存”按钮将被激活，因为该字段获得$dirty。这样才行。

如果我首先编辑用户名，问题就会开始发生。如果我创建一个新的有效用户名，然后开始编辑电子邮件字段，我将在电子邮件无效的编辑过程中点击例如 email或email@或{ {1}}并且在这些点上，我们希望“保存”按钮被禁用，但事实并非如此。不知何故，一旦用户名为email@email.，它就会忽略电子邮件为$valid的事实。

它并不止于此。如果我加载页面并开始删除预先加载的电子邮件地址字符char并点击所有$invalid位置，我会看到在每个$invalid位置成功禁用“保存”按钮。这让我发疯了。

$invalid

更新2

我找到了一种更好的方法来启用“保存”按钮。

form(name="userForm", ng-submit="submitForm(userForm.$valid)", novalidate)

    div.form-group
        label Username
        input.form-control(type="text", name="username", ng-model="user.name", ng-minlength="3", ng-maxlength="23", required)
        div.error(ng-show="userForm.username.$invalid && userForm.username.$dirty")
            p.help-block(ng-show="userForm.username.$error.minlength") Username is too short.
            p.help-block(ng-show="userForm.username.$error.maxlength") Username is too long.
            p.help-block(ng-show="userForm.username.$error.required") Username is required.

    div.form-group
        label Email
        input.form-control(type="email", name="email", ng-model="user.email", required)
        div.error(ng-show="userForm.email.$invalid && userForm.email.$dirty")
            p.help-block(ng-show="userForm.email.$error.required") Email is required.

    button(ng-model="button", ng-disabled="(userForm.username.$error.minlength || userForm.username.$error.maxlength || userForm.username.$error.required || userForm.username.$pristine || userForm.username.$invalid) && (userForm.email.$error.required || userForm.email.$pristine || userForm.email.$invalid)") Save

现在完美无缺。

Answer 1

也许您可以通过检查form是否为$invalid并且输入是$pristine来切换提交按钮的状态。

所以，你的输入将是

<input 
  type="text" 
  name="username" 
  placeholder="user name" 
  ng-model="user.name" 
  ng-minlength="3" 
  ng-maxlength="23"
  required></input>

<input 
  type="email" 
  name="email" 
  placeholder="email" 
  ng-model="user.email" 
  required></input>

<button
  type="submit" 
  ng-disabled="(userForm.username.$pristine || userForm.email.$pristine) || userForm.$invalid">Save</button>

<-- ng-disabled="(userForm.$pristine || userForm.$invalid" -->

请参阅相关的Plunker http://plnkr.co/edit/7pkRAn“”

Answer 2

我猜你想要什么，条件应该是这样的：

ng-disabled="(userForm.email.$pristine || userForm.email.$invalid) && (userForm.username.$pristine || userForm.username.$invalid)"

Angular指令中的多个“或”表达式

更新1

更新2

2 个答案: