angular表单经验分享

原文

　　https://www.jianshu.com/p/af359bd04f32

大纲

　　1、表单的名字不可以和传入的值的名字相同
　　2、在模板驱动表单的时候要使用angular表单的验证功能，需要将ngModel绑定到模板变量，通过模板变量来判断调用验证器
　　3、模板驱动表单如何绑定radio单选按钮
　　4、模板驱动表单如何绑定checkbox多选按钮
　　5、模板驱动表单如何绑定select单选
　　6、代码素材

1、表单的名字不可以和传入的值的名字相同

<!--
    错误写法：#userName和[(ngModel)]='userName'
    重传入的userName的名字相同，这样在解析模板的时候会出问题
-->
<input 
  name="userName" id="userName" 
  [(ngModel)]='userName' 
  required minlength="4" #userName="ngModel"
>

<!--正确写法：-->
<input 
  name="userName" id="userName" 
  [(ngModel)]='un' 
  required minlength="4" #userName="ngModel"
>

2、在模板驱动表单的时候要使用angular表单的验证功能，需要将ngModel绑定到模板变量，通过模板变量来判断调用验证器

<!--
    需要将ngModel绑定到模板变量#userName，
    然后通过userName来调用angular的表单控制器
-->
<div class="form-field">
    <label for="userName">名字：</label>
    <input name="userName" id="userName"   
      [(ngModel)]='userName1' 
      required minlength="4" #userName="ngModel"
    >
    <div *ngIf="userName.invalid && (userName.dirty || userName.touched)">
        <div *ngIf="userName.errors.required">
            Name is required.
        </div>
        <div *ngIf="userName.errors.minlength">
            Name must be at least 4 characters long.
        </div>
    </div>
</div>

3、模板驱动表单如何绑定radio单选按钮

<!--
    //对应的ts文件中设置,这样单选按钮的默认选中就是man了
    sex = 'man';
-->
<div class="form-field">
    <label>性别</label>
    <label class="subTitle" for="man">男：</label>
    <input type="radio" name="sex" id="man" value="man" [(ngModel)]='sex'>
    <label class="subTitle" for="feman">女：</label>
    <input type="radio" 
      name="sex" id="feman" value="feman" 
      [(ngModel)]='sex'
    >
</div>

4、模板驱动表单如何绑定checkbox多选按钮

<!--
    对应ts文件中需要设置数据
    noun = {
        chinese:true,
        english:true,
        math:true,
        run:true,
        walk:true,
    };
-->
<div class="form-field">
    <label>名词</label>
    <label class="subTitle" for="chinese">语文：</label>
    <input type="checkbox" 
      name="chinese" id="chinese" checked="noun.chinese"     
      [(ngModel)]='noun.chinese'
    >
    <label class="subTitle" for="english">英语：</label>
    <input type="checkbox" 
      name="english" id="english" checked="noun.english" 
      [(ngModel)]='noun.english'
    >
    <label class="subTitle" for="math">数学：</label>
    <input type="checkbox" 
      name="math" id="math" checked="noun.math" 
      [(ngModel)]='noun.math'
    >
    <label class="subTitle" for="run">跑步：</label>
    <input type="checkbox" 
      name="run" id="run" checked="noun.run" 
      [(ngModel)]='noun.run'
    >
    <label class="subTitle" for="walk">走路：</label>
    <input type="checkbox" 
      name="walk" id="walk" checked="noun.walk" 
      [(ngModel)]='noun.walk'
    >
</div>

5、模板驱动表单如何绑定select单选

<!--
    对应的表单元素设置：weather = 'cloudy';
-->
<div class="form-field">
    <label for="weather">天气</label>
    <select id="weather" name="weather" [(ngModel)]='weather'>
        <option value="sunny">晴天</option>
        <option value="rain">雨天</option>
        <option value="overcast">阴天</option>
        <option value="cloudy">多云</option>
        <option value="wind">大风</option>
    </select>
</div>

6、代码素材

　　angular代码实例中的angular-form中讲述了一些angular的form的使用，里面不仅有模板驱动型表单不同类型字段的绑定还有包括响应式表单不同字段的绑定方式，希望能给读者提供到帮助。