javascript - Angular2 show element if no specific elements are visible -

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 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 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 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 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 if <input>'s don't validate. need disable submit button if 1 or more of <p> elements visible (not sure how else finish off form validation). best method of enabling submit button if validations passed, , keeping disabled if 1 or more validations failed?

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>