Form custom fields validation angular 2

问题:

I try form template driven validation for select and radio buttons and checkboxes but not working these custom fields. How we can validate these fields.I do not know how to do it.Please anyone help me to resolve this issue.

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

回答1:

It looks like the messages for required validation for these controls is missing. Add them (if this is the validation required) as

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

I see that a few of your controls are not visible. Take them outside the label tag as

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