2017-04-05 10 views
1

HTML表示されていない場合:<input>年代は検証していない場合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>要素を持っています。それらの<p>要素のうちの1つ以上が表示されている場合は、送信ボタンを無効にする必要があります(フォーム検証を終了する方法がわからない場合)。すべての検証が成功した場合に送信ボタンを有効にし、1つ以上の検証が失敗した場合は無効にする最良の方法は何ですか?

答えて

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>

関連する問題