溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關Angular2.js如何實現表單驗證的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
1、能夠嵌入動態文本于HTML頁面。2、對瀏覽器事件做出響應。3、讀寫HTML元素。4、在數據被提交到服務器之前驗證數據。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創建和修改等。7、基于Node.js技術進行服務器端編程。
表單創建一個有效、引人注目的數據輸入體驗。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">
<h2>個人信息</h2>
<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>效果為
好了，一個簡單的表單就做好了，下一篇講控制表單，校驗錯誤等內容。
感謝各位的閱讀！關于“Angular2.js如何實現表單驗證”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
