angular2應用表單

表單創建一個有機、有效、引人注目的數據輸入體驗。 Angular 表單協調一組數據綁定控件，跟蹤變更，驗證輸入的有效性，并且顯示錯誤信息。
從零構建一個簡單的表單：會學到

  • 1.使用組件和模板構建一個 Angular 表單
  • 2.使用 [(ngModel)] 語法實現雙向數據綁定，以便于讀取和寫入輸入控件的值
  • 3.結合表單來使用 ngModel ，能讓我們跟蹤狀態的變化并對表單控件做驗證
  • 4.使用特殊的 CSS 類來跟蹤控件狀態，并提供強烈的視覺反饋
  • 5.向用戶顯示有效性驗證的錯誤提示，以及禁用 / 啟用表單控件
  • 6.通過模板引用變量，在控件之間共享信息

模板驅動的表單

在模板中按照 Angular 模板語法 來構建表單。Angular 也支持的另一種方式叫做模型驅動表單 Model-Driven Forms
創建表單步驟:

  • 創建 Hero 模型類
  • Create the Hero model class
  • 創建控制此表單的組件
  • 創建具有初始表單布局的模板
  • 使用 ngModel 雙向數據綁定語法把數據屬性綁定到每個表單輸入控件
  • 往每個表單輸入控件上添加 name 屬性 (Attribute)
  • 添加自定義 CSS 來提供視覺反饋
  • 顯示和隱藏有效性驗證的錯誤信息
  • 使用 ngSubmit 處理表單提交
  • 禁用此表單的提交按鈕，直到表單變為有效

（1）創建一個 Hero 模型類

像以前的那樣創建一個類；
創建一個hero.ts文件并添加類和類的屬性；
<pre>
export class Hero {
constructor(
public id: number,
public name: string,
public power: string,
public alterEgo?: string
) { }
}</pre>
TypeScript 編譯器為構造函數中每個標為 public 的參數創建一個公有字段，并在創建新的英雄實例時，把參數值自動賦給這些公有字段。
alterEgo 是可選的，構造函數允許我們省略它，注意 alterEgo? 中的問號 (?) 。

（2）創建一個表單組件

每個 Angular 表單分為兩部分：一個基于 HTML 的模板，和一個基于代碼的組件，它用來處理數據和用戶交互。
創建一個名叫 hero-form.component.ts 的文件，并且放進下列定義：
<pre>import { Component } from '@angular/core';
import { Hero } from './hero';
@Component({
moduleId: module.id,
selector: 'hero-form',
templateUrl: 'hero-form.component.html'
})
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; }
// TODO: Remove this when we're done
get diagnostic() { return JSON.stringify(this.model); }
}
</pre>
修改 app.module.ts
<pre>import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HeroFormComponent } from './hero-form.component';
@NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [
AppComponent,
HeroFormComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }</pre>
特殊處：如果一個組件、指令或管道出現在模塊的 imports 數組中，就說明它是外來模塊， 不要 再到 declarations 數組中聲明它們。 如果你自己寫的它，并且它屬于當前模塊， 就要 把它聲明在 declarations 數組中。
修改原來的app.component.ts
<pre>import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<hero-form></hero-form>'
})
export class AppComponent { }</pre>意義在于把上邊的模板嵌套到my-app標簽中

（3）創建一個初始 hero-form.component.html表單模板

  <div class="container">
    <h1>Hero Form</h1>
    <form>
    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" class="form-control" id="name" required>
    </div>
    <div class="form-group">
      <label for="alterEgo">Alter Ego</label>
      <input type="text" class="form-control" id="alterEgo">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>

container、 form-group 、 form-control 和 btn 類來自 Twitter Bootstrap 。純粹是裝飾。 我們使用 Bootstrap 來打扮我們的表單。
表單不需要任何樣式庫,添加樣式純粹來裝飾表單的。
我們來添加樣式表。
在應用的根目錄下打開一個終端窗口，敲如下命令：
npm install bootstrap --save
打開 index.html 文件并且把下列鏈接添加到 <head> 中。
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

用 ngFor 添加超能力

在**app/hero-form.component.html **中 Alter Ego 的緊下方添加如下 HTML ：
<pre><div class="form-group">
<label for="power">Hero Power</label>
<select class="form-control" id="power" required>
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
</select>
</div></pre>
我們為列表中的每一項超能力渲染出一個 <option> 標簽。 模板輸入變量 p 在每個迭代中都代表一個不同的超能力，我們使用雙花括號插值表達式語法來顯示它的名稱。

使用 ngModel 進行雙向數據綁定

[(ngModel)] 語法，它使用一種超簡單的方式把我們的表單綁定到模型

表明數據從輸入框流動到模型，再反向流動回來的過程。 這就是雙向數據綁定！
讓我們用類似的方式把 [(ngModel)] 綁定添加到 第二人格 和 超能力 屬性。 我們將拋棄輸入框的綁定消息，并在組件頂部添加一個到 diagnostic 的新綁定。 這樣我們能確認雙向數據綁定 在整個 Hero 模型上 都能正常工作了

修改app/hero-form.component.html
<pre>{{diagnostic}}
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name"
required
[(ngModel)]="model.name" name="name">
</div>
<div class="form-group">
<label for="alterEgo">Alter Ego</label>
<input type="text" class="form-control" id="alterEgo"
[(ngModel)]="model.alterEgo" name="alterEgo">
</div>
<div class="form-group">
<label for="power">Hero Power</label>
<select class="form-control" id="power"
required
[(ngModel)]="model.power" name="power">
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
</select>
</div></pre>

（4）通過 ngModel 跟蹤修改狀態與有效性驗證

表單不僅是關于數據綁定的。我們還希望知道表單中各個控件的狀態，NgModel 指令不僅僅跟蹤狀態。它還使用三個 CSS 類來更新控件，以便反映當前狀態。 我們可以通過定制這些 CSS 類的樣式來更改控件的外觀，以及讓消息被顯示或隱藏。我們往姓名 <input> 標簽上添加一個名叫 spy 的臨時 模板引用變量 ，然后用這個 spy 來顯示它上面的所有 css 類。
<pre><input type="text" class="form-control" id="name"
required
[(ngModel)]="model.name" name="name"

spy >


TODO: remove this: {{spy.className}}</pre>
現在，運行本應用，并讓 *姓名 *輸入框獲得焦點。 然后嚴格按照下面四個步驟來做：

  • 1.查看輸入框，但別碰它
  • 2.點擊輸入框，然后點擊輸入框外面
  • 3.在名字的末尾添加一個斜杠
  • 4.刪除名字
    動作和它對應的效果如下：
control-state-transitions-anim.gif

這個沒有顏色效果，可以自己去搜搜

添加自定義 CSS ，以提供視覺反饋

validity-required-indicator.png

新建一個forms.css文件，添加兩個樣式的定義就達到了預期效果。
<pre>forms.css
.ng-valid[required], .ng-valid.required {
border-left: 5px solid #42A948; /* green /
}
.ng-invalid:not(form) {
border-left: 5px solid #a94442; / red */
}
index.html
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="forms.css">
</pre>

（45）顯示和隱藏有效性校驗的錯誤信息

當用戶刪除姓名時，顯示方式應該是這樣的：

name-required-error.png

修改app/hero-form.component.html中的name框：
<pre><label for="name">Name</label>
<input type="text" class="form-control" id="name"
required
[(ngModel)]="model.name" name="name" #name="ngModel" >
<div [hidden]="name.valid || name.pristine"
class="alert alert-danger">
Name is required
</div>
</pre>
我們需要一個模板引用變量來訪問模板中輸入框的 Angular 控件。 這里，我們創建了一個名叫 name的變量，并且把它賦值為 "ngModel" .現在，通過把 div元素的 hidden屬性綁定到 name控件的屬性，我們就可以控制“姓名”字段錯誤信息的可見性了。
修改app/hero-form.component.html
<pre><div [hidden]="name.valid || name.pristine"
class="alert alert-danger">
</pre>

添加一個英雄，并且重置表單

新增一個英雄按鈕和英雄方法：<pre>
app/hero-form.component.html
<button type="button" class="btn btn-default" (click)="newHero()">New Hero</button>
app/hero-form.component.ts:
newHero() {
this.model = new Hero(42, '', '');
}
</pre>

通過 ngSubmit 來提交表單

<pre><form ngIf="active" (ngSubmit)="onSubmit()" #heroForm="ngForm">
<button type="submit" class="btn btn-default" [disabled]="!heroForm.form.valid">Submit</button></pre>
[disabled]代表刪除必填項變灰和提交后變灰，
NgForm 指令:Angular 替我們做了。 Angular 自動創建了 NgForm 指令，并且把它附加到 <form> 標簽上。
NgForm 指令為普通的 form 元素擴充了額外的特性。 它持有我們通過 ngModel 指令和 name 屬性為各個元素創建的那些控件類，并且監視它們的屬性變化，包括有效性。 它還有自己的 valid 屬性，只有當 每一個被包含的控件 都有效時，它才有效。在填表完成之后，用戶還應該能提交這個表單。 “提交”按鈕位于表單的底部，它自己不會做任何事，但因為具有特殊的 type 值 (type="submit") ，所以它會觸發表單提交。僅僅觸發“表單提交”在目前是沒用的。 要讓它有用，我們還要用另一個 Angular 指令更新 <form> 標簽—— NgSubmit ， 并且通過事件綁定機制把它綁定到 HeroFormComponent.submit() 方法上。
##這節結束了 請點個贊吧——_——*

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 版本：Angular 5.0.0-alpha 表單是商業應用的支柱，我們用它來執行登錄、求助、下單、預訂機票、安排...
    soojade閱讀 1,291評論 0贊 1
  • 學習資料來自 Angular.cn 與 Angular.io。 模板語法 在線例子 在 Angular 中，組件扮...
    小鐳Ra閱讀 3,768評論 0贊 3
  • 一、起項目 根據官方教程，執行以下： 然后要把下面文件略微改一下（官方沒有寫），否則編譯出的js和ts混在一起，很...
    Angeladaddy閱讀 1,298評論 0贊 4
  • Angular 2架構總覽 - 簡書http://www.lxweimin.com/p/aeb11061b82c A...
    葡萄喃喃囈語閱讀 1,497評論 2贊 13
  • 悲傷的意義是什么，快樂的意義又是什么呢？ 很多人在不知不覺中轉換著自己的角色，有多少是自主的，又有多少是被動的呢？...
    伊靜同學閱讀 177評論 0贊 1