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>
元素中的一个或多个可见(不知道如何完成表单验证)。如果所有验证都通过了,那么启用提交按钮的最佳方法是什么?如果一个或多个验证失败,那么将其禁用为禁用?
答
在按钮元素中使用禁用。
<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>