Angular2.js實現(xiàn)表單驗證詳解
表單創(chuàng)建一個有效、引人注目的數(shù)據(jù)輸入體驗。Angular表單協(xié)調(diào)一組數(shù)據(jù)綁定控件,跟蹤變更。驗證輸入的有效性,并且顯示錯誤信息。
接下來,主要內(nèi)容有:
1、使用組件和模板構(gòu)建Angular表單;
2、用ngModel創(chuàng)建數(shù)據(jù)綁定,以讀取和寫入輸入控件的值。
構(gòu)建Angular表單
我們想構(gòu)建包含姓名,電話,特長三個字段的表單
1、我們可以參照快速啟動那篇,創(chuàng)建一個名為forms的新項目,也可以使用之前的項目進行修改;
2、創(chuàng)建Person類;
3、創(chuàng)建控制此表單的組件;
4、創(chuàng)建具有初始表單布局的模板;
5、使用ngModel雙向數(shù)據(jù)綁定語法把數(shù)據(jù)屬性綁定到每個表單控件中。
創(chuàng)建Person類
在app文件夾下創(chuàng)建hero.ts文件,內(nèi)容為
export class Person{ constructor( public id:number, public name:string, public ownpower:string, public power?:string //可填可不填,可選的 ?不能省略 ){} } //創(chuàng)建一個類,定義它的屬性
TypeScript編譯器為每個public構(gòu)造函數(shù)參數(shù)生成一個公共字段,在創(chuàng)建一個新的Person實例時,自動把參數(shù)賦給這些公共字段。
創(chuàng)建表單組件
在app文件夾下創(chuàng)建hero-form-component.ts文件:
import { Component } from '@angular/core'; import {Person} from './hero'; //引入hero.ts中的Person類 @Component({ moduleId:module.id,//屬性設(shè)置了基地址,用于從相對路徑加載form.html模板文件 selector: 'hero-form',//在模板中創(chuàng)建添加<hero-form>標(biāo)簽 templateUrl:'../form.html'//模板上增加form.html里面的內(nèi)容 }) 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、這段代碼導(dǎo)入了Angular核心庫以及我們剛剛創(chuàng)建的Person模型;
2、@Component裝飾器的選擇器將<hero-form>標(biāo)簽把這個表單放進父模板;
3、moduleId:module.id屬性設(shè)置了基地址,用于從相對模塊路徑加載templateUrl;
4、templateUrl屬性指向一個獨立的HTML模板文件,使用外聯(lián)模板;
5、位model和powers提供了演示用的假數(shù)據(jù);
6、在最后增加diagnostic屬性,她返回這個模型的JSON形式。在開發(fā)過程中用于調(diào)試。
修改app.module.ts啟動文件
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import {FormsModule} from '@angular/forms';//導(dǎo)入表單 import { AppComponent1 } from './app.component'; import{HeroFormComponent} from './hero-form.component';//導(dǎo)入新增加的組件類 //導(dǎo)入hero-form.component.ts中的HeroFormComponent @NgModule({ imports: [ BrowserModule, FormsModule //表單模板 ], declarations: [ AppComponent1 , HeroFormComponent //類名 ], bootstrap: [AppComponent1] }) export class AppModule { }
1、導(dǎo)入FormsModule和新組件HeroFormComponent;
2、把FormModule添加到ngModel裝飾器的imports列表中,這樣應(yīng)用就能訪問模板驅(qū)動表單的所有特性,包括ngModel;
3、把HeroFormComponent添加到ngModule裝飾器的declarations列表中,使HeroFormComponent組件在整個模塊中可見。
修改app.component.ts文件
import { Component } from '@angular/core'; @Component({ selector: 'my-app',//在index.html中創(chuàng)建添加<my-app>標(biāo)簽 //包裹<hero-form></hero-form> template:`<hero-form></hero-form>` //模板里面添加此標(biāo)簽(hero-form里面的內(nèi)容) }) export class AppComponent1{}
關(guān)于表單的組建模板構(gòu)建完了。
創(chuàng)建初始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> <!--循環(huán)--> <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進行雙向數(shù)據(jù)綁定[(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>
效果為
好了,一個簡單的表單就做好了,下一篇講控制表單,校驗錯誤等內(nèi)容。
參考:https://angular.cn/docs/ts/latest/guide/forms.html
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS教程之MVC體系結(jié)構(gòu)詳解
本文主要講解AngularJS MVC體系結(jié)構(gòu),這里提供詳細的教程供大家學(xué)習(xí)參考,有需要的小伙伴可以參考下2016-08-08Angular.js前臺傳list數(shù)組由后臺spring MVC接收數(shù)組示例代碼
這篇文章主要給大家介紹了關(guān)于Angular.js前臺傳list數(shù)組之后,由后臺spring MVC接收數(shù)組的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07關(guān)于AngularJS中ng-repeat不更新視圖的解決方法
今天小編就為大家分享一篇關(guān)于AngularJS中ng-repeat不更新視圖的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09詳解Webstorm 下的Angular2.0開發(fā)之路(圖文)
這篇文章主要介紹了詳解Webstorm 下的Angular2.0開發(fā)之路(圖文) ,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12Angular 13+開發(fā)模式慢的原因及構(gòu)建性能優(yōu)化解析
這篇文章主要為大家介紹了Angular 13+開發(fā)模式慢的原因及構(gòu)建性能優(yōu)化解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12詳解angular分頁插件tm.pagination二次觸發(fā)問題解決方案
這篇文章主要介紹了詳解angular分頁插件tm.pagination二次觸發(fā)問題解決方案,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07