Angular2.js實現表單驗證詳解

2019-11-19 16:15:45

字體：大中小

來源：轉載

供稿：網友

表單創建一個有效、引人注目的數據輸入體驗。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>

效果為