angular学习之表单数据双向绑定

首先要引入模块

 然后组件中的应用----html页面

<div>
  信息采集
</div>

<ul>
  <li>
    <label for="name">姓名：</label>
    <input type="text" id="name" [(ngModel)]="peopleInfo.name" />
  </li>
  <li>
    <label for="gander">性别：</label>
    <input type="radio" id="man" [(ngModel)]="peopleInfo.gander" value="男" />男
    <input
      type="radio"
      id="woman"
      [(ngModel)]="peopleInfo.gander"
      value="女"
    />女
  </li>
  <li>
    <label for="city">城市：</label>
    <select name="城市" id="city"
      [(ngModel)]="peopleInfo.city">
      <option [value]="item" *ngFor = 'let item of citys'>{{item}}</option>
    </select>
  </li>
  <li>
    <label for="hobby">爱好：</label>
    <span *ngFor="let item of peopleInfo.hobby;let key = index">
        <input type="checkbox" [id]='key' [(ngModel)]="item.checked" />{{item.hobby1}}
    </span>
  </li>
  <li>
    <label for="msg">备注：</label>
    <textarea name="msg" id="msg" cols="30" rows="10" [(ngModel)]="peopleInfo.msgg"></textarea>
  </li>
</ul>
<!-- <button (click)='getState()'</button>>获取表单内容</button> -->
<div>
  <p>当前信息为：</p>
  <p>姓名：{{ peopleInfo.name }}</p>
  <p>性别：{{ peopleInfo.gander }}</p>
  <p>城市：{{ peopleInfo.city }}</p>
  <p>爱好：{{ peopleInfo.hobby | json }}</p>
  <p>备注：{{ peopleInfo.msgg }}</p>
</div>

----ts页面

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

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {
  public citys = ["中国","法国","日本"];
  public peopleInfo = {
    name:'',
    gander:'',
    city:'',
    msgg:'',
    hobby:[
      {
        hobby1:'吃饭',
        checked:true
      },{
        hobby1:'敲代码',
        checked:false
      },{
        hobby1:'看视频',
        checked:true
      }
    ]
  }
  // 显示信息
  public getState():void{
    console.log(this.peopleInfo.name)
  }

  constructor() { }

  ngOnInit() {
  }

}

 

最终效果如下

 

 

 结束，千万注意，这是其中的一个小组件，必须要引入到app.modules.ts中，而且在app.component.html中要用这个组件

本人小菜鸟，如果错误欢迎大神指点