標籤：資訊 selector 地址 目的 module pes one 寫入 模型
表單建立一個有效、令人信服的資料輸入體驗。Angular表單協調一組資料繫結控制項，跟蹤變更。驗證輸入的有效性，並且顯示錯誤資訊。
接下來，主要內容有：
1、使用組件和模板構建Angular表單；
2、用ngModel建立資料繫結，以讀取和寫入輸入控制項的值。
構建Angular表單
我們想構建包含姓名，電話，特長三個欄位的表單
1、我們可以參照快速啟動那篇，建立一個名為forms的新項目，也可以使用之前的項目進行修改；
2、建立Person類；
3、建立控制此表單的組件；
4、建立具有初始表單布局的模板；
5、使用ngModel雙向資料繫結文法把資料屬性綁定到每個表單控制項中。
建立Person類
在app檔案夾下建立hero.ts檔案，內容為
export class Person{ constructor( public id:number, public name:string, public ownpower:string, public power?:string //可填可不填，可選的 ？不能省略 ){}}//建立一個類，定義它的屬性
TypeScript編譯器為每個public建構函式參數產生一個公用欄位，在建立一個新的Person執行個體時，自動把參數賦給這些公用欄位。
建立表單組件
在app檔案夾下建立hero-form-component.ts檔案：
import { Component } from ‘@angular/core‘;import {Person} from ‘./hero‘; //引入hero.ts中的Person類@Component({ moduleId:module.id,//屬性設定了基地址，用於從相對路徑載入form.html模板檔案 selector: ‘hero-form‘,//在模板中建立添加<hero-form>標籤 templateUrl:‘../form.html‘//模板上增加form.html裡面的內容})export class HeroFormComponent { powers=[‘唱歌‘,‘跳舞‘,‘彈琴‘,‘畫畫‘]; model=new Person(1,‘小明‘,‘跳舞‘,this.powers[2]);//執行個體化 submitted=false; onsubmit(){this.submitted=true;} get diagnostic(){return JSON.stringify(this.model);} //這個先暫時不管}
1、這段代碼匯入了Angular核心庫以及我們剛剛建立的Person模型；
2、@Component裝飾器的選取器將<hero-form>標籤把這個表單放進父模板；
3、moduleId:module.id屬性設定了基地址，用於從相對模組路徑載入templateUrl；
4、templateUrl屬性指向一個獨立的HTML模板檔案，使用外聯模板；
5、位model和powers提供了示範用的假資料；
6、在最後增加diagnostic屬性，她返回這個模型的JSON形式。在開發過程中用於調試。
修改app.module.ts開機檔案
import { NgModule } from ‘@angular/core‘;import { BrowserModule } from ‘@angular/platform-browser‘;import {FormsModule} from ‘@angular/forms‘;//匯入表單import { AppComponent1 } from ‘./app.component‘;import{HeroFormComponent} from ‘./hero-form.component‘;//匯入新增加的組件類//匯入hero-form.component.ts中的HeroFormComponent@NgModule({imports: [ BrowserModule, FormsModule //表單範本],declarations: [ AppComponent1 , HeroFormComponent //類名],bootstrap: [AppComponent1]})export class AppModule { }
1、匯入FormsModule和新組件HeroFormComponent；
2、把FormModule添加到ngModel裝飾器的imports列表中，這樣應用就能訪問模板驅動表單的所有特性，包括ngModel；
3、把HeroFormComponent添加到ngModule裝飾器的declarations列表中，使HeroFormComponent組件在整個模組中可見。
修改app.component.ts檔案
import { Component } from ‘@angular/core‘;@Component({ selector: ‘my-app‘,//在index.html中建立添加<my-app>標籤 //包裹<hero-form></hero-form> template:`<hero-form></hero-form>` //模板裡面添加此標籤（hero-form裡面的內容）})export class AppComponent1{}
關於表單的組建模板構建完了。
建立初始HTML表單範本，上文提到的form.html檔案
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>form表單</title></head><body><div class="container"> <h1>個人資訊</h1> <form> <div class="form-group"> <label for="name">姓名</label> <input type="text" id="name" required class="form-control"> </div> <div class="form-group"> <label for="ownpower">特長</label> <input type="text" class="form-control" id="ownpower"> </div> <div class="form-group"> <label for="power">能力選擇</label> <select class="form-control" id="power" required> <!--迴圈--> <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option> </select> </div> <button type="submit" class="btn btn-success">提交</button> </form></div></body></html>
我們可以使用css來美化表單，在index.html裡面引入樣式表檔案
<!--樣式表--> <link rel="stylesheet" href="css/bootstrap.min.css">
顯示的效果為
使用ngModel進行雙向資料繫結[(ngModel)]文法
修改form.html檔案，拿姓名做個執行個體
<div class="form-group"> <label for="name">姓名，顯示為{{model.name}}</label> <input type="text" id="name" required class="form-control" [(ngModel)]="model.name" name="name" #name1="ngModel"> <!--雙向繫結:{{model.name}}--> <!--使用ngModwl進行雙向繫結，其綁定了model.name，所以所有有model。name的都可以同時變化--> </div>
效果為
好了，一個簡單的表單就做好了，下一篇講控製表單，校正錯誤等內容。
參考：https://angular.cn/docs/ts/latest/guide/forms.html
Angular2.js——表單（上）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
