我有一个带有2个输入和2个复选框的角形,然后是下一个按钮:只有当其中一个输入与数据绑定并且其中一个复选框被选中时,该按钮才能被点击。所以无论哪个输入或哪个复选框都是必须的。
<form #personalForm="ngForm" class="editForm" novalidate>
<div class='row'>
<div class='col-xs-offset-1 col-xs-10 col-xs-offset-1 col-xs-10'>
<div class="row">
<div class='col-xs-12 col-sm-6'>
<div class="form-group">
<label class="control-label form-label" for="email">Email</label>
<input class="form-control input-md form-input" id="name" name="email" #email="ngModel" required pattern="^[^\s@]+@[^\s@]+\.[^\s@]{2,}$"
id="email" name="email" type="text" placeholder="Email" [(ngModel)]="customer.email" #spy>
<div class="alert alert-danger" [hidden]="email.valid">Email is required and must be valid</div>
</div>
</div>
<div class='col-xs-12 col-sm-6'>
<div class="form-group">
<label class="control-label form-label" for="phone">Phone Number</label>
<input class="form-control input-md form-input" #phone="ngModel" required id="phone" name="phone" type="text"
(keypress)="keyPress($event)" minlength=10 maxlength=10 [(ngModel)]="customer.phone">
<div class="alert alert-danger" [hidden]="phone.valid">Phone Number is required</div>
</div>
</div>
</div>
<div class='row'>
<div class="btn-group btn-group" data-toggle="buttons">
<label class="btn active">
<input type="checkbox" value="checkboxOne" #testEmail="ngModel" required name="test" [(ngModel)]="personal.testEmail">
<i class="fa fa-square-o fa-2x"></i>
<i class="fa fa-check-square-o fa-2x"></i>Email
</label>
<label class="btn active">
<input type="checkbox" #testSMS="ngModel" required name="test" [(ngModel)]="personal.testSMS" value="E-Mail">
<i class="fa fa-square-o fa-2x"></i>
<i class="fa fa-check-square-o fa-2x"></i>SMS
</label>
</div>
</div>
<div id="divReqEmail" style="color:red" [hidden]="testEmail.valid"> * test Email or SMS is required</div>
<div class="form-group text-center">
<button uiSref="result" class="btn btn-default btn-outline-rounded btn-info" [disabled]="!personalForm.valid" (click)="save(personalForm)">
Next
<span style="margin-left:10px;" class="glyphicon glyphicon-arrow-right"></span>
</button>
</div>
</div>
</div>
</div>
</form>
答案 0 :(得分:1)
您可以对打字稿进行自定义验证。您可以使用两个数组来存储输入和复选框的值。使用数组长度绑定disabled
按钮的Next
属性。