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

Question

I am trying to check to see if 1 of 4 conditions are being met on 2 input fields in order to enable a Save button using an AngularJS expression in the ng-disabled directive.

The code below will enable the Save button only if the first two conditions are met. So if the user enters any text in the email input field thus making it $dirty and $valid , the Save button will become enabled. But if the user enters any text into the username input field, the Save button will remain disabled.

How can I get the last two conditions to be seen?

<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>

UPDATE 1

I ended up adding 2 more conditions. It is almost working perfectly now.

When the page loads the Save button is disabled by default because both fields are $prisitine . If I delete or add a character to either the username or email field, the Save button will get activated because the field gets $dirty . So that works.

The problem starts to happen if I first edit the username. If I create a new valid username and then start editing the email field, I will hit points in the editing process where the email is not valid eg email or email@ or email@email. and at these points we expect the Save button to become disabled but it does not. Somehow once the username is $valid it ignores the fact that the email is $invalid .

It does not stop there. If I load the page and just start deleting the preloaded email address char by char and hit all the $invalid positions, I will see the Save button successfully get disabled at each $invalid position. It is driving me crazy.

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

UPDATE 2

I found a better way to enable the Save button.

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

Works perfect now.

Answer 1

Maybe you could toggle the state of your submit button just by checking if the form is $invalid and inputs are $pristine .

So, your inputs would be

<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" -->

See related Plunker here http://plnkr.co/edit/7pkRAn ""

Answer 2

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

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