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

Question

我在 angular 中有一个表单，其中包含 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>

Answer 1

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

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

How to check if the form has at minimum one input that has data Angular 2+ Form Validation

angular

angular-forms