表单双向数据绑定

  1. 在html中定义表单 ```html

    人员登记系统

  • 姓名: 

    1.     <!-- 单选框的双向数据绑定 -->
    2.     <li>
    3.         性别:
    4.         &nbsp;&nbsp;&nbsp;&nbsp;
    5.         <input type="radio" name="sex" id="sex1" value='1' [(ngModel)]="peopleInfo.sex"><label for="sex1">男</label>
    6.         &nbsp;&nbsp;&nbsp;&nbsp; 
    7.         <input type="radio" name="sex" id="sex2" value='2' [(ngModel)]="peopleInfo.sex"><label for="sex2">女</label>
    8.     </li>
    10.     <!-- 下拉框的双向数据绑定 -->
    11.     <li>
    12.         城市：
    13.         <select name="city" id="city" [(ngModel)]="peopleInfo.city">
    14.             <option [value]="item" *ngFor="let item of cityList"> {{ item }} </option>
    15.         </select>
    16.     </li>
    18.     <!-- 复选框的双向数据绑定 -->
    19.     <li>
    20.         爱好:
    21.         &nbsp;&nbsp;
    22.         <span  *ngFor="let item of peopleInfo.hobby; let key=index">
    23.             <input type="checkbox" name="hobby" [id]="'check' + key" [(ngModel)]='item.checked'> <label [for]="'check' + key"> {{ item.title }} </label>
    24.             &nbsp;&nbsp;
    25.         </span> 
    26.     </li>
    28.     <!-- 多行文本框的双向数据绑定 -->
    29.     <li>
    30.         备注：
    31.         <textarea name="mark" id="mark" cols="30" rows="10" [(ngModel)]='peopleInfo.mark'></textarea>
    32.     </li>
    33. </ul>
    35. <br>
    36. <br>
    37. <br>
    38. <br>
    39. <br>
    40. <br>
    41. <!-- 以json样式实时展示peopleInfo对象的内容 -->

    1. ```
    3. 2. 绘制css样式
    5. ```css
    6. h2{
    7.     text-align: center;
    8. }
    10. .people_list {
    11.     width: 400px;
    12.  margin: 20px auto;
    13.     padding: 20px;
    14.     border: 1px solid #eee;
    15. }
    17. .people_list li {
    18.     height: 50px;
    19.     line-height: 50px;
    20. }
    22. .people_list li .form-input {
    23.     width: 300px;
    24.     height: 28px;
    25. }
    1. 编写ts ```typescript import { Component, OnInit } from ‘@angular/core’;

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

    1. // 定义peopleInfo对象，用于存放表单数据

    public peopleInfo:any = { username: ‘’, sex:’1’, city:’上海’, hobby: [ { title: ‘吃饭’, checked: false }, { title: ‘睡觉’, checked: false }, { title: ‘敲代码’, checked: true } ], mark:’’ }

    1. // 作为下拉框的选项

    public cityList:string[] = [‘北京’, ‘上海’, ‘深圳’];

    constructor() { } ngOnInit(): void { }

    doSubmit():void { console.log(this.peopleInfo); } } ```