ng form组件（表单）

tip：

数据的双向绑定（数据的双向绑定只是针对表单）

实现数据的双向绑定需要在app_module.ts（根模块）中进行注册一些东西

import {FormsModule} from '@angular/forms';

@NgModule中的imports中进行声明一下FormsModule

 

html:

　　

　　<div class="form">

　　　　<p>人员登录系统</p>

　　　　<ul>

　　　　　　<li>姓名：<input type="text" [(ngModel)]="peopleInfo.username"></li>

　　　　　　<li>写别：<input type="radio" name="sex" value="1" [(ngModel)]="peopleInfo.sex"><label [for]="sex1">男</label>

　　　　　　　　　　  <input type="radio" name="sex" value="2" [(ngModel)]="peopleInfo.sex"><label [for]="sex2">女</label>

　　　　　　</li>

　　　　　　<li>

　　　　　　　　城市:<select [(ngModel)]="peopleInfo.city">

　　　　　　　　　　　　<option *ngFor="let item of peopleInfo.citylist" [value]="item">{{item}}</option>

　　　　　　　　　　</select>

　　　　　　</li>

　　　　　　<li>爱好：<span *ngFor="let item of peopleInfo.hobby;let key=index">　　　　　　　　　　

　　　　　　　　　　　　<input type="checkbox" [id]="'checked'+key" [(ngModel)]="item.checked">

　　　　　　　　　　　　<label [for]="'checked'+key">{{item.title}}</label>

　　　　　　　　　　</span>

　　　　　　</li>

　　　　　　<li>描述：<textarea [(ngModel)]="peopleInfo.mark">{{mark}}</textarea></li>

　　　　　　<li><button (click)="dosubmit();" class="submit">提交</button></li>

　　　　</ul>

　　</div>

 

ts中：

　　

　　public peopleInfo:any={

　　　　username:"",

　　　　sex:"1",

　　　　city:"北京",

　　　　citylist:["北京","上海","深圳"],

　　　　hobby:[

　　　　　　{title:"吃饭",checked:true},

　　　　　　{title:"睡觉",checked:false},

　　　　　　{title:"打豆豆",checked:false}],

　　　　mark:""

　　　　};

 

dosubmit(){

console.log(this.peopleInfo);

}

---

select 难点详解：

　　　　[(ngmodle)]是双向绑定的写法，propleInfo.sex在ts中的值为1，默认为男，

　　　　（判断peopleInfo。sex是否为1，是则为选中，判断的依据是peopleInfo.sex的值是否和当前的value的值相等，相等则为选中，反之未选中），

　　　　当点击为女的时候，将女的值传递给sex

 

　　　　select中：*ngFor="let item of peopleInfo.citylist" 循环获取到对象中的城市列表中的值，{{item}}是为循环出来的值，

　　　　[value]="item"是为：value属性的值为item ,此时的value的值是和循环出来的值为相同。

　　　　[(ngModel)]="peopleInfo.city" 绑定city是因为城市选项中绑定的一些值都是在select的时候有一个值，故此要给select标签进行一次绑定数据，

　　　　当发现peopleInfo.city的值和option中的哪一个[value]="item"相等时。如果相等就选中那个option,同理，当option改变的时候，也会重新在赋值

　　　　给peopleInfo.city。同时，当我们在option选择一个值的时候也是最终显示在select的标签之中，所以在此select进行数据绑定也就行得通了，在页面中看不到的可以通过

　　　　console.log来查看

 

checkbox 难点详解：

　　　　*ngFor="let item of peopleInfo.hobby;let key=index"循环peopleInfo对象下的hobby中的值，key=index是为索引，[id]和[for]的值是一样的是为了进行对应

　　　　所以写成：[for]="'checked'+key"，[id]="'checked'+key"都是为了拿到chedked值，[(ngModel)]="item.checked"是为了检测是否选中，在爱好选项中只有第一个值为true,

　　　　其他为false，但是只要点中一个就要进行改变其checked的值，所以这是时候就会把itemed.checked的值赋值给ts中的checked,从而实现双向绑定。

---