Styjun

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>

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>