Question

实际上我有两种类型的输入类型：一种是普通文本，另一种是单选类型。我想在输入提交按钮之前对这两个字段进行验证。

对于这个普通的输入字段，我进行了验证，但是我不知道该如何处理单选按钮。我想验证用户是否未选择任何单选按钮。

<form  name="form" #f="ngForm" (ngSubmit)="f.form.valid && onSubmit()" novalidate class="feedback-form">
         <div class="col-md-12">

            <div class="form-group col-md-4">
               <label for="selectionDate">Selection Date</label>
               <input type="text" 
               id="selectionDate"
               class="form-control"
                name="selectionDate"
                placeholder="Please enter the date" 
               [(ngModel)]="selection.selectionDate"
                #selectionDate="ngModel"
                [ngClass]="{ 'is-invalid': f.submitted && selectionDate.invalid }"
                 required
                  />

             <div *ngIf="f.submitted && selectionDate.invalid" class="invalid-input">
            <!-- individual validation errors -->
            <div *ngIf="selectionDate.errors?.required">DateField is required</div>
          </div>

            </div>
            <div class="form-group col-md-4">
               <label for="selectedBy">Selected By</label>
               <br>
               <label class="radio-inline">
               <input type="radio" name="selectedBy" 
               [(ngModel)]="selection.selectedBy" value="Department">Department
               </label>
               <label class="radio-inline">
               <input type="radio" name="selectedBy"  
               [(ngModel)]="selection.selectedBy" value="Office">Office
               </label>
            </div>
         </div>
</form>

Answer 1

与之前验证输入元素的方式相同

        <div class="form-group col-md-4">
           <label for="selectedBy">Selected By</label>
           <br>
           <label class="radio-inline">
           <input type="radio" name="selectedBy" 
           [(ngModel)]="selection.selectedBy" value="Department" required
                           #selectedBy="ngModel">Department
           </label>
           <label class="radio-inline">
           <input type="radio" name="selectedBy"  
           [(ngModel)]="selection.selectedBy" value="Office" required>Office
           </label>
        <div *ngIf="selectedBy.errors?.required">selectedBy is required</div>
      </div>

demo

Answer 2

单选按钮的名称被提交到后端，而id用于诸如标签关联之类的前端。

id应该始终是唯一的，因此请对其进行修复，否则它将不起作用。

以下是我针对类似情况的解决方案。需要注意的是使用？运算符进行可选的属性访问，否则您将得到“无法读取null的'required属性'”

        <div class="custom-control custom-radio">
          <input
            id="male"
            formControlName="gender"
            type="radio"
            class="custom-control-input"
            value="male"
            [ngClass]="{ 'is-invalid': submitted && f.gender.errors?.required}"
          />
          <label class="custom-control-label" for="male">Male</label>
        </div>
        <div class="custom-control custom-radio">
          <input
            id="female"
            formControlName="gender"
            type="radio"
            class="custom-control-input"
            value="female"
            [ngClass]="{ 'is-invalid': submitted && f.gender.errors?.required}"
          />

如何在角度6的单选按钮中执行验证？

2 个答案: