Проверка пользовательских полей формы угловая 2

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>