如果你現(xiàn)在正在運(yùn)行該應(yīng)用，你會(huì)看到選擇控件中的超能力列表。由于尚未將這些 input 元素綁定到數(shù)據(jù)值或事件，因此它們?nèi)匀皇强瞻椎?，沒有任何行為。

把輸入控件綁定到數(shù)據(jù)屬性

下一步是使用雙向數(shù)據(jù)綁定把輸入控件綁定到相應(yīng)的 ?Hero ?屬性，這樣它們就可以通過更新數(shù)據(jù)模型來響應(yīng)用戶的輸入，并通過更新顯示來響應(yīng)數(shù)據(jù)中的程序化變更。

該 ?ngModel ?指令是由 ?FormsModule ?聲明的，它能讓你把模板驅(qū)動(dòng)表單中的控件綁定到數(shù)據(jù)模型中的屬性。當(dāng)你使用雙向數(shù)據(jù)綁定的語法 ?[(ngModel)]? 引入該指令時(shí)，Angular 就可以跟蹤控件的值和用戶交互，并保持視圖與模型的同步。

1. 編輯模板 ?hero-form.component.html?。
2. 找到 Name 標(biāo)簽旁邊的 ?? 標(biāo)記。
3. 使用雙向數(shù)據(jù)綁定語法 ?[(ngModel)]="..."? 添加 ?ngModel ?指令。

TODO: remove this: {{model.name}}

這個(gè)例子中在每個(gè) input 標(biāo)記后面都有一個(gè)臨時(shí)的診斷插值 ?{{model.name}}?，以顯示相應(yīng)屬性的當(dāng)前數(shù)據(jù)值。本提醒是為了讓你在觀察完這個(gè)雙向數(shù)據(jù)綁定后刪除這些診斷行。

訪問表單的整體狀態(tài)

當(dāng)你導(dǎo)入了 ?FormsModule ?時(shí)，Angular 會(huì)自動(dòng)為模板中的 ?? 標(biāo)簽創(chuàng)建并附加一個(gè) ?NgForm ?指令。（因?yàn)?nbsp;?NgForm ?定義了一個(gè)能匹配 ?? 元素的選擇器 ?form?）。

要訪問 ?NgForm ?和表單的整體狀態(tài)，就要聲明一個(gè)模板引用變量。

1. 編輯模板 ?hero-form.component.html?。
2. 為 ?? 標(biāo)簽添加模板引用變量 ?#heroForm?，并把它的值設(shè)置如下。

模板變量 ?heroForm ?現(xiàn)在是對(duì) ?NgForm ?指令實(shí)例的引用，該指令實(shí)例管理整個(gè)表單。

3. 運(yùn)行該應(yīng)用。
4. 開始在 Name 輸入框中輸入。

在添加和刪除字符時(shí)，你可以看到它們從數(shù)據(jù)模型中出現(xiàn)和消失。比如：

用來顯示插值的診斷行證明了這些值確實(shí)從輸入框流向了模型，然后再返回。

為控件元素命名

在元素上使用 ?[(ngModel)]? 時(shí)，必須為該元素定義一個(gè) ?name ?屬性。Angular 會(huì)用這個(gè)指定的名字來把這個(gè)元素注冊(cè)到父 ?? 元素上的 ?NgForm ?指令中。

這個(gè)例子中為 ?? 元素添加了一個(gè) ?name ?屬性，并把它的值設(shè)置為 “name”，用來表示英雄的名字。任何唯一的值都可以用，但最好用描述性的名稱。

1. 為Alter Ego和Hero Power添加類似的 ?[(ngModel)]? 綁定和 ?name ?屬性。
2. 你現(xiàn)在可以移除顯示插值的診斷消息了。
3. 要想確認(rèn)雙向數(shù)據(jù)綁定是否在整個(gè)英雄模型上都有效，可以在該組件的頂部添加一個(gè)帶有 ?json ?管道的新文本綁定。?json ?管道會(huì)把數(shù)據(jù)序列化為字符串。

表單模板修改完畢后，應(yīng)如下所示：

{{ model | json }}

  Name
  



  Alter Ego
  



  Hero Power
  
    {{pow}}
  

• 注意，每個(gè) ?? 元素都有一個(gè) ?id ?屬性。?? 元素的 ?for ?屬性用它來把標(biāo)簽匹配到輸入控件。這是一個(gè)標(biāo)準(zhǔn)的 HTML 特性。
• 每個(gè) ?? 元素都有一個(gè)必需的 ?name ?屬性，Angular 用它來注冊(cè)表單中的控件。

如果你現(xiàn)在運(yùn)行該應(yīng)用并更改英雄模型的每個(gè)屬性，該表單可能會(huì)顯示如下：

通過表單頂部的診斷行可以確認(rèn)所有的更改都已反映在模型中。

4. 你已經(jīng)觀察到了這種效果，可以刪除 ?{{ model | json }}? 的文本綁定了。

跟蹤控件狀態(tài)

控件上的 ?NgModel ?指令會(huì)跟蹤該控件的狀態(tài)。它會(huì)告訴你用戶是否接觸過該控件、該值是否發(fā)生了變化，或者該值是否無效。Angular 在控件元素上設(shè)置了特殊的 CSS 類來反映其狀態(tài)，如下表所示。

此外，Angular 還會(huì)在提交時(shí)把 ?ng-submitted? 類應(yīng)用到 ?? 元素上。這個(gè)類不會(huì)應(yīng)用到內(nèi)部控件上。

你可以用這些 CSS 類來根據(jù)控件的狀態(tài)定義其樣式。

觀察控件狀態(tài)

要想知道框架是如何添加和移除這些類的，請(qǐng)打開瀏覽器的開發(fā)者工具，檢查代表英雄名字的 ??

1. 使用瀏覽器的開發(fā)者工具，找到與 “Name” 輸入框?qū)?yīng)的 ?? 元素。除了 “form-control” 類之外，你還可以看到該元素有多個(gè) CSS 類。
2. 當(dāng)你第一次啟動(dòng)它的時(shí)候，這些類表明它是一個(gè)有效的值，該值在初始化或重置之后還沒有改變過，并且在該控件自初始化或重置后也沒有被訪問過。
3. 在 Name ?? 框中執(zhí)行以下操作，看看會(huì)出現(xiàn)哪些類。
• 查看，但不要碰它。這些類表明它沒有被碰過、還是最初的值，并且有效。
• 在 Name 框內(nèi)單擊，然后單擊它外部。該控件現(xiàn)在已被訪問過，該元素具有 ?ng-touched? 類，取代了 ?ng-untouched? 類。
• 在名字的末尾添加斜杠。現(xiàn)在它被碰過，而且是臟的（變化過）。
• 刪掉這個(gè)名字。這會(huì)使該值無效，所以 ?ng-invalid? 類會(huì)取代 ?ng-valid? 類。

為狀態(tài)創(chuàng)建視覺反饋

注意 ?ng-valid? / ?ng-invalid? 這兩個(gè)類，因?yàn)槟阆朐谥禑o效時(shí)發(fā)出強(qiáng)烈的視覺信號(hào)。你還要標(biāo)記必填字段。

你可以在輸入框的左側(cè)用彩條標(biāo)記必填字段和無效數(shù)據(jù)：

要想用這種方式修改外觀，請(qǐng)執(zhí)行以下步驟。

1. 為 ?ng-*? CSS 類添加一些定義。
2. 把這些類定義添加到一個(gè)新的 ?forms.css? 文件中。
3. 把這個(gè)新文件添加到項(xiàng)目中，作為 ?index.html? 的兄弟：

.ng-valid[required], .ng-valid.required  {
  border-left: 5px solid #42A948; /* green */
}

.ng-invalid:not(form)  {
  border-left: 5px solid #a94442; /* red */
}

4. 在 ?index.html? 文件中，更新 ?? 標(biāo)簽以包含新的樣式表。

顯示和隱藏驗(yàn)證錯(cuò)誤信息

Name 輸入框是必填的，清除它就會(huì)把彩條變成紅色。這表明有些東西是錯(cuò)的，但是用戶并不知道要怎么做或該做什么。你可以通過查看和響應(yīng)控件的狀態(tài)來提供有用的信息。

當(dāng)用戶刪除該名字時(shí)，該表單應(yīng)如下所示：

Hero Power 選擇框也是必填的，但它不需要這樣的錯(cuò)誤處理，因?yàn)檫x擇框已經(jīng)把選擇限制在有效值范圍內(nèi)。

要在適當(dāng)?shù)臅r(shí)候定義和顯示錯(cuò)誤信息，請(qǐng)執(zhí)行以下步驟。

1. 使用模板引用變量擴(kuò)展 ?? 標(biāo)簽，你可以用來從模板中訪問輸入框的 Angular 控件。在這個(gè)例子中，該變量是 ?#name="ngModel"?。

模板引用變量（?#name?）設(shè)置為 ?"ngModel"?，因?yàn)?nbsp;"ngModel" 是 ?NgModel.exportAs? 屬性的值。這個(gè)屬性告訴 Angular 如何把引用變量和指令鏈接起來。

2. 添加一個(gè)包含合適錯(cuò)誤信息 ?
   ?
3. 通過把 ?name ?控件的屬性綁定到 ?
   ? 元素的 ?hidden ?屬性來顯示或隱藏錯(cuò)誤信息。
4. 為 ?name ?輸入框添加一個(gè)有條件的錯(cuò)誤信息，如下例所示。

Name


  Name is required

關(guān)于 "PRISTINE"（原始）狀態(tài)的說明

在這個(gè)例子中，當(dāng)控件是有效的（valid）或者是
原始的（pristine）時(shí)，你會(huì)隱藏這些消息。原始表示該用戶在此表單中顯示的值尚未更改過。如果你忽略了 ?
pristine ?狀態(tài)，那么只有當(dāng)值有效時(shí)才會(huì)隱藏這些消息。如果你把一個(gè)新的（空白）英雄或一個(gè)無效的英雄傳給這個(gè)組件，你會(huì)立刻看到錯(cuò)誤信息，而這時(shí)候你還沒有做過任何事情。

你可能希望只有在用戶做出無效更改時(shí)，才顯示該消息。因此當(dāng) ?
pristine ?狀態(tài)時(shí)，隱藏這條消息就可以滿足這個(gè)目標(biāo)。當(dāng)你在下一步中為表單添加一個(gè)新的英雄時(shí)，就會(huì)看到這個(gè)選擇有多重要。

添加一個(gè)新英雄

本練習(xí)通過添加模型數(shù)據(jù)，展示了如何響應(yīng)原生 HTML 按鈕單擊事件。要讓表單用戶添加一個(gè)新的英雄，就要添加一個(gè)能響應(yīng) click 事件的 New Hero 按鈕。

1. 在模板中，把 “New Hero” 這個(gè) ?? 元素放在表單底部。
2. 在組件文件中，把創(chuàng)建英雄的方法添加到英雄數(shù)據(jù)模型中。

newHero() {
  this.model = new Hero(42, '', '');
}

3. 把按鈕的 click 事件綁定到一個(gè)創(chuàng)建英雄的方法 ?newHero()? 上。

New Hero

4. 再次運(yùn)行該應(yīng)用，單擊 New Hero 按鈕。

表單會(huì)清空，輸入框左側(cè)的必填欄會(huì)顯示紅色，說明 ?name ?和 ?power ?屬性無效。請(qǐng)注意，錯(cuò)誤消息是隱藏的。這是因?yàn)楸韱翁幱谠紶顟B(tài)。你還沒有改過任何東西。

5. 輸入一個(gè)名字，然后再次點(diǎn)擊 New Hero。

現(xiàn)在，該應(yīng)用會(huì)顯示一條錯(cuò)誤信息 ?Name is required?，因?yàn)樵撦斎肟虿辉偈窃紶顟B(tài)。表單會(huì)記住你在單擊 New Hero 之前輸入過一個(gè)名字。

6. 要恢復(fù)表單控件的原始狀態(tài)，可以在調(diào)用 ?newHero()? 方法之后強(qiáng)制調(diào)用表單的 ?reset()? 方法以清除所有標(biāo)志。

New Hero

現(xiàn)在單擊 New Hero 會(huì)重置表單及其控件標(biāo)志。

使用 ngSubmit 提交表單

用戶應(yīng)該可以在填寫之后提交這個(gè)表單。表單底部的 Submit 按鈕本身沒有任何作用，但由于它的類型（?type="submit"?），它會(huì)觸發(fā)一個(gè)表單提交事件。要響應(yīng)此事件，請(qǐng)執(zhí)行以下步驟。

1. 把表單的 ?ngSubmit ?事件屬性綁定到一個(gè) hero-form 組件的 ?onSubmit()? 方法中。
2. 使用模板引用變量 ?#heroForm? 訪問包含 Submit 按鈕的表單，并創(chuàng)建一個(gè)事件綁定。你可以把表示它整體有效性的 form 屬性綁定到 Submit 按鈕的 ?disabled ?屬性上。

Submit

3. 運(yùn)行該應(yīng)用。注意，該按鈕已啟用 - 雖然它還沒有做任何有用的事情。
4. 刪除名稱值。這違反了“必需”規(guī)則，因此會(huì)顯示錯(cuò)誤消息，并注意它還會(huì)禁用“提交”按鈕。

你不必把按鈕的啟用狀態(tài)明確地關(guān)聯(lián)表單的有效性上。當(dāng) ?FormsModule ?在增強(qiáng)的表單元素上定義模板引用變量時(shí)，會(huì)自動(dòng)執(zhí)行此操作，然后在按鈕控件中引用該變量。

響應(yīng)表單提交

要展示對(duì)表單提交的響應(yīng)，你可以隱藏?cái)?shù)據(jù)輸入?yún)^(qū)域并就地顯示其它內(nèi)容。

1. 把整個(gè)表單包裹進(jìn)一個(gè) ?
   ? 中并把它的 ?hidden ?屬性綁定到 ?HeroFormComponent.submitted? 屬性上。

  
Hero Form
  

     

  

• 主表單從一開始就是可見的，因?yàn)樵谔峤恢?，它?nbsp;?submitted ?屬性都是 false，正如 ?HeroFormComponent ?中的這個(gè)片段所顯示的：

submitted = false;

onSubmit() { this.submitted = true; }

• 點(diǎn)擊 Submit 按鈕后，?submitted ?標(biāo)志就變?yōu)?nbsp;?true?，表單就會(huì)消失。
2. 要在表單處于已提交狀態(tài)時(shí)顯示其它內(nèi)容，請(qǐng)?jiān)谛碌?nbsp;?
   ? 包裝器下添加以下 HTML。

  
You submitted the following:
  

    
Name
    
{{ model.name }}
  
  

    
Alter Ego
    
{{ model.alterEgo }}
  
  

    
Power
    
{{ model.power }}
  
  

  Edit

這個(gè) ?

?（用于顯示帶插值綁定的只讀英雄）只在組件處于已提交狀態(tài)時(shí)才會(huì)出現(xiàn)。
另外還顯示了一個(gè) Edit 按鈕，它的 click 事件綁定到了一個(gè)清除 ?submitted ?標(biāo)志的表達(dá)式。
單擊 Edit 按鈕，將顯示切換回可編輯的表單。

總結(jié)

本頁討論的 Angular 表單利用了下列框架特性來支持?jǐn)?shù)據(jù)修改，驗(yàn)證等工作。

• 一個(gè) Angular HTML 表單模板
• 帶 ?@Component? 裝飾器的表單組件類
• 綁定到 ?NgForm.ngSubmit? 事件屬性來處理表單提交
• 模板引用變量，比如 ?#heroForm? 和 ?#name ?
• 雙向數(shù)據(jù)綁定的 ?[(ngModel)]? 語法
• ?name ?屬性的用途是驗(yàn)證和表單元素的變更跟蹤
• 用輸入控件上的引用變量的 ?valid? 屬性來檢查控件是否有效，并據(jù)此顯示或隱藏錯(cuò)誤信息
• 用 ?NgForm ?的有效性來控制 Submit 按鈕的啟用狀態(tài)
• 自定義 CSS 類，為用戶提供關(guān)于無效控件的視覺反饋

這里是該應(yīng)用最終版本的代碼：

• hero-form/hero-form.component.ts

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

import { Hero } from '../hero';

@Component({
  selector: 'app-hero-form',
  templateUrl: './hero-form.component.html',
  styleUrls: ['./hero-form.component.css']
})
export class HeroFormComponent {

  powers = ['Really Smart', 'Super Flexible',
            'Super Hot', 'Weather Changer'];

  model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');

  submitted = false;

  onSubmit() { this.submitted = true; }

  newHero() {
    this.model = new Hero(42, '', '');
  }
}

•  hero-form/hero-form.component.html

  

    
Hero Form
    

      

        Name
        
        

          Name is required
        
      

      

        Alter Ego
        
      

      

        Hero Power
        
          {{pow}}
        
        

          Power is required
        
      

      Submit
      New Hero
    
  

  

    
You submitted the following:
    

      
Name
      
{{ model.name }}
    
    

      
Alter Ego
      
{{ model.alterEgo }}
    
    

      
Power
      
{{ model.power }}
    
    

    Edit
  

• hero.ts

export class Hero {

  constructor(
    public id: number,
    public name: string,
    public power: string,
    public alterEgo?: string
  ) {  }

}

• app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HeroFormComponent } from './hero-form/hero-form.component';

@NgModule({
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule
  ],
  declarations: [
    AppComponent,
    HeroFormComponent
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

• app.component.html
• app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

• main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

• forms.css

.ng-valid[required], .ng-valid.required  {
  border-left: 5px solid #42A948; /* green */
}

.ng-invalid:not(form)  {
  border-left: 5px solid #a94442; /* red */
}