Angular 7 表单提交 双向数据绑定

Angular 7 表单提交 双向数据绑定

github源码：https://github.com/wangduxiu/Angular7-Demo.git
先在ts中定义数据

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

input框 双向数据绑定

html:

  姓 名：

radio 双向数据绑定

   性 别：
   男
   女

select 双向数据绑定

   城 市：
   
      {{item}}
   

checkbox 双向数据绑定

   爱 好：
   
       {{item.title}}
            
   

全部html代码：

人员登记系统


  

    

      姓 名：
    
    

      性 别：
      男
       
      女
    
    

      城 市：
      
        {{item}}
      
    
    

      爱 好：
      
          {{item.title}}
            
        
    
    

      备 注:
          
    

    
    

    

    

    

    

    

    获取表单的值
    

    



  
    {{peopleInfo |json}}
  

全部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() {
    
  }
  
  Submit(){
    //获取username Dom节点 .value获取表单数据
    // let usernameDom:any = document.getElementById('username');
    // console.log(usernameDom.value);

    //双向数据绑定获取数据
    console.log(this.peopleInfo);
  }

}

最终实现的效果