如果没有特定元素可见,则Angular2显示元素

时间:2017-04-05 22:03:40

标签: javascript angular validation

HTML:

public partial class MyApp : Application
{
    public MyApp()
    {
        InitializeComponent();
        // Toggle appTheme.MergedWith based on Idiom 
        appTheme.MergedWith = Device.Idiom == TargetIdiom.Phone ? typeof(PhoneTheme) : typeof(TabletTheme);
    }
}

如果<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>元素可见,我需要禁用提交按钮(不确定如何完成表单验证)。如果所有验证都通过,启用提交按钮的最佳方法是什么,如果一个或多个验证失败则保持禁用?

1 个答案:

答案 0 :(得分:2)

在按钮元素中使用disabled。

&#13;
&#13;
<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>
&#13;
&#13;
&#13;