angular表單 Dom獲取表單值以及雙向數據綁定

1.app.module.ts中：

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

imports:{

FormsModule

]

案例：

HTML

<h2>人員登記系統</h2>
<div class="people_list">
    <ul>
        <li>姓名：<input type="text" id="username" [(ngModel)]="peopleInfo.username" value="form_input" /></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]="item" *ngFor="let item of peopleInfo.cityList">{{item}}</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 (click)="doSubmit()" class="submit">獲取表單的內容</button>

    <br />
    <br />
    <br />

    <pre>
        {{peopleInfo|json}}
    </pre>
</div>

ts

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

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

  public peopleInfo: any = {
    username: "",
    sex: "1",
    cityList: ["北京", "上海", "深圳"],
    city: "北京",
    hobby: [
      {
        title: "吃飯",
        checked: false
      },
      {
        title: "睡覺",
        checked: false
      },
      {
        title: "敲代碼",
        checked: true
      }
    ],
    mark:""
  }
  constructor() { }

  ngOnInit() {
  }
  doSubmit() {
    let usernameDom: any = document.getElementById('username');
    console.log(usernameDom.value);
  }

}

scss

h2{
    text-align: center;
}
.people_list{
    // background-color:red;
    width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px snow blue;
    li{
        height: 50px;
        line-height: 50px;
        .form_input{
            width: 300px;
            height: 40px;
        }
    }
    .submit{
        width: 100px;
        height: 30px;
        float: right;
        margin-top: 120px;
    }
}