33Angular实现人员登记系统（表单元件的双向数据绑定）

<h1>人员登记系统</h1>
<div class="form">
    <ul>
        <li>
            <label for="userName">姓名：</label><input type="text" id="userName" [(ngModel)]="peopleInfo.uName" />
        </li>
        <li>
            性别：
            <label for="sex1">男</label>  <input type="radio" value='1' name="sex" [(ngModel)]="peopleInfo.sex" id="sex1">&nbsp;&nbsp;
            <label for="sex2">女</label>  <input type="radio" value='2' name="sex" [(ngModel)]="peopleInfo.sex" id="sex2">
        </li>
        <li>
            <label for="cityList">城市：</label>
            <select name="cityList" id="cityList" [(ngModel)]="peopleInfo.city">
                 <option [value]="item" *ngFor="let item of peopleInfo.cityList">{{item}}</option>
            </select>
        </li>
        <li>
            <label for="hobby">爱好：</label>
            <span *ngFor="let item of peopleInfo.hobbyList; let key = index;">
                <input type="checkbox" [id]="key" [(ngModel)]="item.checked"> <label [for]="key">{{item.title}}</label>
            </span>
        </li>
        <li>
            <label for="note">备注：</label>
            <textarea name="note" id="note" cols="30" rows="7" [(ngModel)]="peopleInfo.note"></textarea>
        </li>
    </ul>
    <button (click)="getInfo()">获取人员信息</button>
</div>

<div class="pre">
    {{peopleInfo | json}}
</div>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
  peopleInfo:object={
    uName:'',
    sex:'',
    cityList:['北京','上海','天津','重庆'],
    city:'上海',
    hobbyList:[
      {
        title:'唱歌',
        checked:true,
      },
      {
        title:'跳舞',
        checked:false
      },
      {
        title:'敲代码',
        checked:false
      },
      {
        title:'睡觉',
        checked:false,
      } ],
      note:'',
  }

  constructor() { }

  ngOnInit() {
  }
  
  getInfo(){
    console.log(this.peopleInfo);
  }

}