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:

<li>
  姓 名：<input type="text" id="username" class="username" [(ngModel)]="peopleInfo.username"/>
</li>

radio 双向数据绑定

<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>

select 双向数据绑定

<li>
   城 市：
   <select name="city" id="city" [(ngModel)]="peopleInfo.city">
      <option [value]=item *ngFor="let item of peopleInfo.cityList">{{item}}</option>
   </select>
</li>

checkbox 双向数据绑定

<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>

全部html代码：

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

<div class="people_list">
  <ul>
    <li>
      姓 名：<input type="text" id="username" class="username" [(ngModel)]="peopleInfo.username"/>
    </li>
    <li>
      性 别：
      <input type="radio" value="1" name="sex" id="sex1" [(ngModel)]="peopleInfo.sex"/><label for="sex1" >男</label>
      &nbsp;
      <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="" cols="30" rows="10" [(ngModel)]="peopleInfo.mark"></textarea>    
    </li>

    
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <button id="btn" (click)="Submit()">获取表单的值</button>
    <br>
    <br>


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

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

}

最终实现的效果