Angular表单创建和校验

Angular中提供了模板驱动表单和响应式表单。
相对来做，模板驱动表单使用更加简单，只需要在表单外围添加#myForm="ngForm"
指令，给每个表单项添加ngModel指令和name属性，然后就可以通过myform.value获取到表单中所有的值；

一、模板驱动表单

1、基础用法

创建模板驱动表单需要3个步骤

1、添加#myForm="ngForm"
2、在每个input表单项上添加ngModel指令和name属性
3、在app.module.ts中引入FormsModule

import { FormsModule }   from '@angular/forms';
@NgModule(
{
  imports:[FormsModule]
}
)

  <form #myForm="ngForm">
    <ion-item>
      <ion-label>标题：</ion-label>
      <ion-input type="text" name="title" ngModel></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>子标题：</ion-label>
      <ion-input type="text" name="subtitle" ngModel></ion-input>
    </ion-item>
  </form>
  {{myForm.value|json}}
//{{myForm.value.title|json}}取标题的值

效果：


1.gif

2、给每个表单项单独定义数据模型

给每个input表单在name="title" ngModel基础上,添加#mytitle="ngModel"，把本表单数据绑定到mytitle数据模型上。可以通过{{mytitle.value}}直接获取数据。

  <form #myForm="ngForm">
    <ion-item>
      <ion-label>标题：</ion-label>
      <ion-input type="text" name="title" ngModel #mytitle="ngModel"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>子标题：</ion-label>
      <ion-input type="text" name="subtitle" ngModel></ion-input>
    </ion-item>
  </form>
  {{myForm.value|json}} <br>
  {{mytitle.value}}
2.gif

3、ngModelGroup使用

将需要归纳到一个数据模型中的所有表单，放到一个ngModelGroup指令中去

  <form #myForm="ngForm">
    <ion-item>
      <ion-label>标题：</ion-label>
      <ion-input type="text" name="title" ngModel></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>子标题：</ion-label>
      <ion-input type="text" name="subtitle" ngModel></ion-input>
    </ion-item>
    <div ngModelGroup="passwordInfo">
      <ion-item>
        <ion-label>密码：</ion-label>
        <ion-input type="text" name="password" ngModel></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>确认密码：</ion-label>
        <ion-input type="text" name="password2" ngModel></ion-input>
      </ion-item>
    </div>
  </form>
  {{myForm.value|json}}
3.gif

二、响应式表单

1、创建

响应式表单有三个表单类，FormGroup、FormControl、FormArray，FormGroup可以用来嵌套。ionic3中创建时，不需要在app.module.ts中引入ReactiveFormModule。不需要在app.module中引用@angular/forms模块，因为在app.module中已经引入了@angular/platform-browser模块，而在@angular/platform-browser模块中又导出了 @angular/forms 。

  <form [formGroup]="myform" (ngSubmit)="save()">
    <ion-item>
      <ion-label>标题：</ion-label>
      <ion-input type="text" name="title" formControlName="title"></ion-input>
    </ion-item>
    <div formArrayName="emails">
      <ion-item *ngFor="let item of myform.get('emails').controls;let i=index;">
        <ion-label>邮箱：</ion-label>
        <ion-input type="text" [formControlName]="i"></ion-input>
      </ion-item>
    </div>
    <div formGroupName="passwordInfo">
      <ion-item>
        <ion-label>密码：</ion-label>
        <ion-input type="text" formControlName="password1"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>确认密码：</ion-label>
        <ion-input type="text" formControlName="password2"></ion-input>
      </ion-item>
    </div>
    <button ion-button type="submit" >保存</button>
  </form>

import { FormGroup, FormControl, FormArray } from '@angular/forms';
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage(
  { name: "my" }
)
@Component({
  selector: 'page-my',
  templateUrl: 'my.html',
})
export class MyPage {

  myform: FormGroup;
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams
  ) {
    this.myform = new FormGroup({
      title: new FormControl(),
      emails: new FormArray([
        new FormControl(),
        new FormControl()
      ]),
      passwordInfo: new FormGroup({
        password1: new FormControl(),
        password2: new FormControl()
      })
    });
  }

  save() {
    console.log(this.myform.value);
  }

}

效果：


image.png

2、使用FormBuilder简化创建代码

只需要修改my.ts中代码

import { FormGroup, FormControl, FormArray, FormBuilder } from '@angular/forms';
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage(
  { name: "my" }
)
@Component({
  selector: 'page-my',
  templateUrl: 'my.html',
})
export class MyPage {
  myform: FormGroup;
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams
  ) {

    let fb: FormBuilder = new FormBuilder();
    this.myform = fb.group({
      title: [""],
      emails: fb.array([
        "", ""
      ]),
      passwordInfo: fb.group({
        password1: [""],
        password2: [""]
      })
    });
  }

  save() {
    console.log(this.myform.value);
  }
}

三、响应式表单的校验

在创建表单时，推荐直接使用响应式表单，因为在使用FormBuilder创建表单模型的时候，可以直接提供本地校验和异步校验。
本地校验可以是系统自带的一些校验（min、max、required、minLength、maxLength、requiredTrue、pattern、nullValidator），也可以是自定义校验器。
异步校验是返回一个流或者一个可观察的promise对象。
下面例子战士了本地校验的方法：

my.html代码：

<ion-header>
  <ion-navbar>
    <ion-title>my</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-list>
    <form [formGroup]="myform" (ngSubmit)="save()">
      <ion-item>
        <ion-label>标题：</ion-label>
        <ion-input type="text" name="title" formControlName="title"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>手机：</ion-label>
        <ion-input type="text" name="mobile" formControlName="mobile"></ion-input>
      </ion-item>
      <div formArrayName="emails">
        <ion-item *ngFor="let item of myform.get('emails').controls;let i=index;">
          <ion-label>邮箱：</ion-label>
          <ion-input type="text" [formControlName]="i"></ion-input>
        </ion-item>
      </div>
      <div formGroupName="passwordInfo">
        <ion-item>
          <ion-label>密码：</ion-label>
          <ion-input type="text" formControlName="password1"></ion-input>
        </ion-item>
        <ion-item>
          <ion-label>确认密码：</ion-label>
          <ion-input type="text" formControlName="password2"></ion-input>
        </ion-item>
      </div>
      <button ion-button type="submit">保存</button>
    </form>
  </ion-list>
</ion-content>

my.ts方法：

import { FormGroup, FormBuilder, Validators, FormControl, AbstractControl } from '@angular/forms';
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage(
  { name: "my" }
)
@Component({
  selector: 'page-my',
  templateUrl: 'my.html',
})
export class MyPage {
  myform: FormGroup;
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public fb: FormBuilder
  ) {
    this.myform = this.fb.group({
      title: ["", [Validators.required, Validators.minLength(3)]],
      mobile: ["", [this.mobileValidator]],
      emails: this.fb.array(["", ""]),
      passwordInfo: this.fb.group({
        password1: [""],
        password2: [""]
      }, { validator: this.passwordValidator })//子FormGroup数据校验必须是一个{validator:***}形式的参数
    });
  }
  //自定义校验器，参数必须是AbstractControl类型，此类型是FormControll、FormGroup、FormArray的父类。返回值是一个json，key必须是string类型。
  // nameValidator(param: AbstractControl): { [key: string]: any } {
  //   return null;
  // }
  mobileValidator(mobile: FormControl): any {
    let value = (mobile.value || "") + "";
    let myreg = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
    let valid = myreg.test(value);
    return valid ? null : { mobile: true };
  }
  passwordValidator(passwordInfo: FormGroup): any {
    let password1 = passwordInfo.get("password1").value;
    let password2 = passwordInfo.get("password2").value;
    let valid = (password1 == password2);
    return valid ? null : { password: true };
  }
  save() {
    let title = this.myform.get("title");
    let mobile = this.myform.get("mobile");
    let passwordInfo = this.myform.get("passwordInfo");
    if (!this.myform.valid) {
      if (title.hasError("required")) {
        alert("标题必填");
        return;
      }
      //*******************注意hasError中参数必须都小写********************
      if (title.hasError("minlength")) {
        alert("标题最小3位");
        return;
      }
      if (mobile.hasError("mobile")) {
        alert("手机格式不对");
        return
      }
      if (passwordInfo.hasError("password")) {
        alert("两次密码输入不一样");
        return
      }
    }
  }
}

上面自定义了两个校验器，mobileValidator和passwordValidator，可以对手机号码和密码进行校验。
如果当myform.vlide==true，则说明整个表单模型没有错误。
要获取某一个表单控件的校验信息：this.myform.get("title").errors
获取某一个表单控件某一种校验是否通过：this.myform.get("title").hasError("minlength")。注意这里的参数一般是小写，可以答应errors结果看下，参数就是里面的key的值。

大型项目一般不会把自定义校验放在具体页面里面，而是建立一个校验ts文件，这些校验函数都放在校验文件里面。新建一个validators.ts，注意当把类中方法改成独立函数的时候，需要在前面加上function，如果是公共函数，则要加上export function。

validators.ts文件

import { FormGroup, FormControl } from '@angular/forms';

export function mobileValidator(mobile: FormControl): any {
    let value = (mobile.value || "") + "";
    let myreg = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
    let valid = myreg.test(value);
    return valid ? null : { mobile: true };
}
export function passwordValidator(passwordInfo: FormGroup): any {
    let password1 = passwordInfo.get("password1").value;
    let password2 = passwordInfo.get("password2").value;
    let valid = (password1 == password2);
    return valid ? null : { password: true };
}

my.ts文件修改：

import { mobileValidator, passwordValidator } from '../validators'//**************头部需要引用*************
  constructor(
    ......
  ) {
    this.myform = this.fb.group({
      title: ["", [Validators.required, Validators.minLength(3)]],
      mobile: ["", [mobileValidator]],//***********直接写函数名称**********
      emails: this.fb.array(["", ""]),
      passwordInfo: this.fb.group({
        password1: [""],
        password2: [""]
      }, { validator: passwordValidator })//***********直接写函数名称**********
    });
  }

四、响应式编程

1、简单的响应式编程

当我们使用ngModel绑定数据模型时，就已经实现了简单的响应式编程。
html模板代码

<ion-input type="text" [(ngModel)]="title"></ion-input>
{{title}}

当在输入框输入文字时，页面上会动态输出文字内容。

2、数据流响应式编程

使用ngModel方式绑定的数据模型，每次keyup都会直接把数据输出。假如我们需要每次输入500ms后才输出，这时候就需要把输入这个事件流做好监听。
html模板代码：

<ion-input type="text" name="title2" [formControl]="title2"></ion-input>

ts文件：

import "rxjs";
title2: FormControl = new FormControl();
  constructor(){
    this.title2.valueChanges
      .debounceTime(500)
      .subscribe(
      (data) => {
        console.log(data);
      }
      )
}

angular教程说需要在app.module.ts中引入ReactiveFormsModule,但是在ionic3实际使用中，不加ReactiveFormsModule也可以正常运行。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,470评论 6赞 501
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,393评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,577评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,176评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,189评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,155评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,041评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,903评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,319评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,539评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,703评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,417评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,013评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,664评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,818评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,711评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,601评论 2赞 353