Angular表單數據模型之雙向綁定（MVVM）實現用戶註冊

應用需求使用 ng 實現用戶註冊功能，廢話不多說，需求比較簡單不在描述，頁面構建原型大概如下圖所示：

同樣先使用Angular CLI腳手架命令創建一個項目demo01, 依次構建組件【userRegistrationInfo】:

• html 頁面構建如下：

<hr/>
<h3 [ngClass]="{'h3': isTrue}">表單實現【MVVM】雙向數據綁定</h3>
<section>
    <p class="h3">
       管道解析，註冊數據模型 =》 {{userRegistInfo | json}} 
    </p>
    <ul [ngStyle]="{'border': '2px solid #369', 'max-width': '300px'}">
        <li [ngStyle]="{'text-align': 'center'}"> 【用戶信息註冊】 </li>
        <li>
            用戶名稱：<input type="text" name="userName" id="userName" [(ngModel)]="userRegistInfo.userName" />
        </li>
        <li>
            電話號碼：<input type="tel" name="telNum" id="telNum" [(ngModel)]="userRegistInfo.telNum" />
        </li>
        <li>
            性別：
            <span *ngFor="let item of userRegistInfo.sexList; let i=index;">
                <input type="radio" name="sex" [id]="'p'+i" [value]="item"  [(ngModel)]="userRegistInfo.sex" /> 
                <label [for]="'p'+i"> {{item}} ----- {{i + 1}} </label> &nbsp;&nbsp;
            </span>
        </li>
        <li>
            所在城市：
            <select name="citys" id="citys" [(ngModel)]="userRegistInfo.city">
                <option value="">--請選擇--</option>
                <option [value]="tmpCity" *ngFor="let tmpCity of userRegistInfo.cityList;"> {{tmpCity}} </option>
            </select>
        </li>
        <li>
            興趣愛好：<br/>
            <span *ngFor="let item of userRegistInfo.xinQuAiHaoList; let i=index;">
                <input type="checkbox" [name]="'aihao'+i" [id]="'aihao'+i" [value]="item.title" [(ngModel)]="item.checked" /> <label [for]="'aihao'+i"> {{item.title}} </label> &nbsp;&nbsp;
            </span>
        </li>
        <li>
            備註：<br/>
            <textarea name="remark" id="remark" cols="36" rows="6" [(ngModel)]="userRegistInfo.remark" ></textarea>
        </li>
        <li>
            <button (click)="getData()">確定</button> &nbsp;&nbsp; <button (click)="setData()">重置</button> <br/><br/>
        </li>
    </ul>
    <p> {{submitMsg}} </p>
</section>

• ts 代碼構建如下：

  public submitMsg:string; //提示信息

  //用戶註冊模型Model=>View(html)
  public userRegistInfo:object = {
    userName:'',
    telNum:123,
    sexList:['男','女'],
    sex:'女',
    cityList:['北京','上海','深圳','重慶','雲南'],
    city:'',
    xinQuAiHaoList:[{
      title:'逛街',
      checked: false
    },
    {
      title:'美食',
      checked: true
    },
    {
      title:'運動',
      checked: false
    },
    {
      title:'聽歌',
      checked: true
    },
    {
      title:'電影',
      checked: false
    },
    {
      title:'看書',
      checked: false
    }],
    remark: '備註'
  };


  //確定
  getData():void {
    console.log(this.userRegistInfo);
    this.submitMsg = '數據提交中。。。';
    var isOk:boolean = confirm('是否確定提交？提交數據如下：'+ JSON.stringify(this.userRegistInfo));
    if (isOk) {
      this.submitMsg = '數據提交成功！';
    }else{
      this.submitMsg = '數據提交失敗或者被取消提交！';
    }
  }

  //重置
  setData():void {
    this.userRegistInfo = {
      userName:'',
      telNum:10086,
      sexList:['男','女'],
      sex:'女',
      cityList:['北京','上海','深圳','重慶','雲南'],
      city:'',
      xinQuAiHaoList:[{
        title:'逛街',
        checked: false
      },
      {
        title:'美食',
        checked: false
      },
      {
        title:'運動',
        checked: false
      },
      {
        title:'聽歌',
        checked: false
      },{
        title:'電影',
        checked: false
      }],
      remark: '備註'
    };
  }

• css 代碼構建：

.ul{ border: 1px solid red; max-width: 300px;}

.h3{ color:orange; }

#p1{ background-color: peru;}

li{ padding:0;margin:0;list-style:none; }

構建好後，把用戶註冊組件掛載在【app.component.html】頁面，同時記得在【app.module.ts】文件中引入 【MVVM】所需模塊【FormsModule】並聲明：

import { FormsModule } from '@angular/forms';  //MVVM 需要導入

//***同時在@NgModule的imports中聲明該模塊FormsModule

最終運行頁面顯示如下效果：

大功告成，有感興趣的小夥伴可以參照上面案例動手實踐哦！