2017-04-05 173 views
1

HTML:Angular2表演元素,如果沒有特定的元素可見

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

我已經<p>元素顯示出來,如果<input>的不驗證。我需要禁用提交按鈕,如果這些<p>元素中的一個或多個可見(不知道如何完成表單驗證)。如果所有驗證都通過了,那麼啓用提交按鈕的最佳方法是什麼?如果一個或多個驗證失敗,那麼將其禁用爲禁用?

回答

2

在按鈕元素中使用禁用。

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