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

我试图检查是否在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@或email@email.，在这些时候，我们希望“保存”按钮被禁用，但实际上并没有。一旦用户名是$valid，它将以某种方式忽略电子邮件为$invalid的事实。

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

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

更新2

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

<button type="submit" ng-disabled="userForm.$pristine || userForm.$invalid">

现在工作完美。

最佳答案

也许只需检查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“”

关于javascript - Angular指令中的多个“或”表达式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25218664/