如何检查表单是否至少有一个具有数据 Angular 2+ 表单验证的输入

Question

我有一个有 2 个输入和 2 个复选框和按钮 next：仅当其中一个输入与数据绑定并且其中一个复选框被选中时，下一个按钮才应该可单击。因此，无论其中哪个输入或哪个复选框都是必须的。

<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>

Answer 1

您可以对打字稿进行自定义验证。您可以使用两个数组来存储输入和复选框的值。使用数组的长度绑定Next按钮的disabled属性。