Angular2.js如何實(shí)現(xiàn)表單驗(yàn)證-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)Angular2.js如何實(shí)現(xiàn)表單驗(yàn)證的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

我們提供的服務(wù)有：網(wǎng)站制作、成都網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、八公山ssl等。為近1000家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的八公山網(wǎng)站制作公司

js的作用是什么

1、能夠嵌入動態(tài)文本于HTML頁面。2、對瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。

表單創(chuàng)建一個有效、引人注目的數(shù)據(jù)輸入體驗(yàn)。Angular表單協(xié)調(diào)一組數(shù)據(jù)綁定控件，跟蹤變更。驗(yàn)證輸入的有效性，并且顯示錯誤信息。

接下來，主要內(nèi)容有：

1、使用組件和模板構(gòu)建Angular表單；

2、用ngModel創(chuàng)建數(shù)據(jù)綁定，以讀取和寫入輸入控件的值。

構(gòu)建Angular表單

我們想構(gòu)建包含姓名，電話，特長三個字段的表單

1、我們可以參照快速啟動那篇，創(chuàng)建一個名為forms的新項(xiàng)目，也可以使用之前的項(xiàng)目進(jìn)行修改；

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í)例時，自動把參數(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]);//實(shí)例化
  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)簽把這個表單放進(jìn)父模板；

3、moduleId:module.id屬性設(shè)置了基地址，用于從相對模塊路徑加載templateUrl；

4、templateUrl屬性指向一個獨(dú)立的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">
  <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>
        <!--循環(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">

顯示的效果為

Angular2.js如何實(shí)現(xiàn)表單驗(yàn)證

使用ngModel進(jìn)行雙向數(shù)據(jù)綁定[(ngModel)]語法

修改form.html文件，拿姓名做個實(shí)例

<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進(jìn)行雙向綁定，其綁定了model.name，所以所有有model。name的都可以同時變化-->
    </div>

效果為

Angular2.js如何實(shí)現(xiàn)表單驗(yàn)證

好了，一個簡單的表單就做好了，下一篇講控制表單，校驗(yàn)錯誤等內(nèi)容。

感謝各位的閱讀！關(guān)于“Angular2.js如何實(shí)現(xiàn)表單驗(yàn)證”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站bm7419.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前標(biāo)題：Angular2.js如何實(shí)現(xiàn)表單驗(yàn)證-創(chuàng)新互聯(lián)
分享URL：http://bm7419.com/article32/dichpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、電子商務(wù)、網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、定制開發(fā)、面包屑導(dǎo)航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容