表单自定义字段验证角度 2 [英] Form custom fields validation angular 2

查看：23
本文介绍了表单自定义字段验证角度 2的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

<!-- 主持无线电检查--><div class="form-group"><label class="col-md-4 control-label">你有吗托管?</label><div class="col-md-4"><div class="radio"><标签><app-radiobtn type="radio" name="hosting" value="yes" [(ngModel)]="model.hosting" required #hosting="ngModel" [(inputModel)]="model.hosting">是</app-radiobtn>

<div class="radio"><标签><app-radiobtn type="radio" name="hosting" value="no"[(ngModel)]="model.hosting" required #hosting="ngModel" [(inputModel)]="model.hosting">否</app-radiobtn>

<!-- 颜色复选框检查--><div class="form-group"><label class="col-md-4 control-label">选择颜色<div class="col-md-4"><div class="checkbox"><标签><app-checkbox [(ngModel)]="model.colors" required name="colors" #colors="ngModel" [(inputModel)]="model.colors"></app-checkbox>

<div class="checkbox"><标签><app-checkbox [(ngModel)]="model.colors" required name="colors" #colors="ngModel" [(inputModel)]="model.colors"></app-checkbox>

解决方案

这些控件所需的验证消息似乎丢失了.添加它们(如果这是所需的验证)为

<span style="color: red;">请选择托管.</span>
<div *ngIf="colors.invalid && f.submitted"><span style="color: red;">请选择颜色.</span>
<div *ngIf="zip1.invalid && f.submitted"><span style="color: red;">Zip 1 是必需的.</span>
<div *ngIf="zip2.invalid && f.submitted"><span style="color: red;">Zip 2 是必需的.</span>

我发现您的一些控件不可见.将它们放在 label 标签之外作为

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

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>

这篇关于表单自定义字段验证角度 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆