angular7表单实现双向数据绑定

使用ngModel实现表单的数据处理：
在使用angular表单双向数据绑定之前，需要在app.module.ts引入FormsModule模块。
import { FormsModule } from '@angular/forms';
imports: [FormsModule]
html:

<div>
  <h2>表单登记</h2>
  <div class="people_list">
    <ul>
      <li class="form_input">姓名：<input type="text" [(ngModel)]="peopleInfo.username"></li>
      <li>性别：<input type="radio" value="1" name="sex" id="sex1" [(ngModel)]="peopleInfo.sex"><label for="sex1">男</label>
                <input type="radio" value="2" name="sex" id="sex2" [(ngModel)]="peopleInfo.sex"><label for="sex2">女</label>
      </li>
      <li>城市：
        <select name="city" id="city" [(ngModel)]="peopleInfo.city">
          <option [value]="city" *ngFor="let city of peopleInfo.cityList">{{city}}</option>
        </select>
      </li>
      <li>爱好：
        <span *ngFor="let item of peopleInfo.hobby; let key = index;">
          <input type="checkbox" [id]="'check' + key" [(ngModel)]="item.checked"><label [for]="'check' + key">{{item.title}}</label>
          &nbsp;&nbsp;
        </span>
      </li>
      <li>备注：
        <textarea name="mark" id="mark" cols="30" rows="5" [(ngModel)]="peopleInfo.mark"></textarea>
      </li>
    </ul>
    <button class="btn" (click)="doSubmit()">获取表单的内容</button>
  </div>
  <pre>
    {{peopleInfo | json}}
  </pre>
</div>

ts:

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

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {

  public peopleInfo: any = {
    username: '',
    sex: '2',
    cityList: ['北京', '上海', '深圳'],
    city: '上海',
    hobby: [{
      title: '吃饭',
      checked: false
    },{
      title: '睡觉',
      checked: false
    },{
      title: '打豆豆',
      checked: true
    }],
    mark: ''
  }

  constructor() { }

  ngOnInit() {
  }

  doSubmit() {
    console.log(this.peopleInfo);
  }
 
}

效果图: