如果没有特定的元素可见，Angular2将显示元素

Question

HTML:

<form>
  <div class="row">
    <div class="col">
      <div class="form-group">
        <label for="registerFormEmail">Email Address</label>
        <input type="text" class="form-control" placeholder="Enter your email address..."
               [(ngModel)]="registerEmail" name="field" #email="ngModel" email>
        <p *ngIf="email.errors?.email">Invalid Email</p>
      </div>
    </div>
    <div class="col"></div>
  </div>

  <div class="row">
    <div class="col">
      <div class="form-group">
        <label for="registerFormBattletag">Battletag</label>
        <input type="text" class="form-control" placeholder="Enter your Battletag..."
               [(ngModel)]="registerBattletag" name="registerFormBattletag" ngControl=”battletag” #btag="ngModel" pattern="[a-zA-Z]+[#][0-9]{4}$">
        <p *ngIf="btag.errors?.pattern">Invalid Battletag</p>
      </div>
    </div>
    <div class="col"></div>
  </div>

  <div class="row">
    <div class="col">
      <div class="form-group">
        <label for="registerFormPassword">Password</label>
        <input type="password" class="form-control" placeholder="Enter your password..."
               [(ngModel)]="registerPassword" name="registerFormPassword" #password="ngModel" [minlength]="6">
        <p *ngIf="password.errors?.minlength">Invalid Password</p>
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <label for="registerFormConfirmPassword">Confirm Password</label>
        <input type="password" class="form-control" placeholder="Confirm your password..."
               [(ngModel)]="registerConfirmPassword" name="registerFormConfirmPassword" #confirmPassword="ngModel" [equalTo]="password">
        <p *ngIf="confirmPassword.errors?.equalTo">equalTo error</p>
      </div>
    </div>
  </div>

  <button type="submit" class="btn btn-primary"
          (click)="register(registerEmail, registerPassword)">Register</button>
</form>

I have <p> elements showing up if the <input> 's don't validate. I need to disable the submit button if one or more of those <p> elements are visible (not sure how else to finish off form validation). What would be the best method of enabling the submit button if all validations passed, and keeping it disabled if one or more validations failed?

Answer 1

use disabled in button element.

 <button type="submit" [disabled]="btag.errors?.pattern || btag.errors?.pattern || password.errors?.minlength || confirmPassword.errors?.equalTo" class="btn btn-primary" (click)="register(registerEmail, registerPassword)">Register</button>