.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:'0',
   citys:['北京','上海','深圳'],
   city:'上海',
   hobby:[{
     title:'吃饭',
     checked:false
   },{
     title:'睡觉',
     checked:false
   },{
     title:'打豆豆',
     checked:true
   }],
   mark:''
 }

 constructor() { }

 ngOnInit(): void {
 }

 doSubmit(){
   /**
    * jquery dom 操作
    */
   // let nameDom:any=document.getElementById('name');
   // console.log(nameDom.value);

   console.log(this.peopleInfo.username,this.peopleInfo.city)
   
 }

}

.html文件

<h1>人员登记系统</h1>

<div class="people">
   <ul>
       <li>姓 名：<input type="text" id="name" [(ngModel)]="peopleInfo.username"></li>
       <li>性 别：
           <input type="radio" name="sex" value="1" [(ngModel)]="peopleInfo.sex">男
           <input type="radio" name="sex" value="0" [(ngModel)]="peopleInfo.sex">女
       </li>
       <li>
           城 市：<select name="city" id="city" [(ngModel)]="peopleInfo.city">
               <option [value]="item" *ngFor="let item of peopleInfo.citys">{{item}}</option>
           </select>
       </li>
       <li>
           爱 好：
           <span *ngFor="let item of peopleInfo.hobby">
               <input type="checkbox" [(ngModel)]="item.checked">{{item.title}}
           </span>
       </li>
       <li>
           备 注：
           <br>
           <textarea name="mark" id="" cols="30" rows="10" [(ngModel)]="peopleInfo.mark"></textarea>
       </li>
   </ul>
   <button (click)="doSubmit()">获取表单的内容</button>
</div>

Angular 获取表单值及数据双向绑定_html