Question

我尝试对选择和单选按钮以及复选框使用表单模板驱动的验证，但是无法使用这些自定义字段。我们如何验证这些字段。我不知道该怎么做。请任何人帮助我解决此问题。

        <!--Country-->

        <div class="form-group">
        <label for="country">Country</label>
        <app-selectbox   name="country" [(inputModel)]="model.country" [(ngModel)]="model.country" #country="ngModel"   required>
        <option [ngValue]="null">---Select---</option>
        <option *ngFor="let item of stateData" [value]="item">
        {{item}}
        </option>
        </app-selectbox> 
        </div>


        <!-- Hosting radio checks -->

        <div class="form-group">
        <label class="col-md-4 control-label">Do you have 
        hosting?</label>
        <div class="col-md-4">
        <div class="radio">
        <label>
        <app-radiobtn type="radio" name="hosting" value="yes" [(ngModel)]="model.hosting" required  #hosting="ngModel" [(inputModel)]="model.hosting"> 
        Yes</app-radiobtn>
        </label>
        </div>
        <div class="radio">
        <label>
        <app-radiobtn type="radio" name="hosting" value="no"[(ngModel)]="model.hosting" required   #hosting="ngModel" [(inputModel)]="model.hosting"> 
        No</app-radiobtn>
        </label>
        </div>
        </div>
        </div>  


        <!-- Colors checkbox checks -->

        <div class="form-group">
        <label class="col-md-4 control-label">Select 
        Colors</label>
        <div class="col-md-4">
        <div class="checkbox">
        <label>
        <app-checkbox  [(ngModel)]="model.colors"  required name="colors" #colors="ngModel" [(inputModel)]="model.colors"></app-checkbox>
        </label>
        </div>
        <div class="checkbox">
        <label>
        <app-checkbox   [(ngModel)]="model.colors" required name="colors" #colors="ngModel" [(inputModel)]="model.colors"></app-checkbox>
        </label>
        </div>
        </div>
        </div>

Answer 1

似乎缺少这些控件所需的验证消息。将它们（如果需要验证）添加为

<div *ngIf="hosting.invalid && f.submitted">
            <span style="color: red;">Please Select Hosting.</span>
</div>  
<div *ngIf="colors.invalid && f.submitted">
            <span style="color: red;">Please Select Colors.</span>
</div> 
<div *ngIf="zip1.invalid && f.submitted">
            <span style="color: red;">Zip 1 is required.</span>
</div> 
<div *ngIf="zip2.invalid && f.submitted">
            <span style="color: red;">Zip 2 is required.</span>
</div>

我看到您的一些控件不可见。将它们带到label标记之外

<app-radiobtn type="radio" name="hostingYes" value="yes" 
  [(ngModel)]="model.hosting" required #hosting="ngModel" 
  [(inputModel)]="model.hosting"> </app-radiobtn>
    <label for="hostingYes">Yes</label>

表单自定义字段验证角度2

1 个答案: