表单自定义字段验证 angular 2

Question

我尝试对 select 和单选按钮和复选框进行表单模板驱动验证，但不使用这些自定义字段。我们如何验证这些 fields.I 不知道该怎么做 it.Please 谁能帮我解决这个问题。

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

表单自定义字段验证 angular 2

Form custom fields validation angular 2

validation

angular

angular5

angular6