专栏首页全栈修仙之路Angular 6.x 表单快速入门

Angular 6.x 表单快速入门

阅读须知

本教程的开发环境及开发语言:

基础知识

Angular CLI 基本使用

$ npm install -g @angular/cli
  • 创建新的项目
$ ng new project-name
  • 启动本地服务器
$ cd project-name
$ ng serve

Angular 表单简介

Angular 中有两种表单:

  • Template Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 )
  • Reactive Forms - 响应式表单

Template Driven 表单的特点

  • 使用方便
  • 适用于简单的场景
  • 通过 [(ngModel)] 实现数据双向绑定
  • 自动生成 Form Model (异步)
  • 最小化组件类的代码
  • 不易于单元测试

Reactive 表单的特点

  • 比较灵活
  • 适用于复杂的场景
  • 简化了HTML模板的代码,把验证逻辑抽离到组件类中
  • 手动创建 Form Model (同步)
  • 方便的跟踪表单控件值的变化
  • 易于动态添加表单控件
  • 易于单元测试

本文主要介绍 Template Driven Forms (模板驱动式表单)的基础知识,相关的知识点会以问答的形式进行介绍。

第一节 - 创建最简单的输入框

如何实现双向绑定?

在 Angular 表单中,我们通过 ngModel 指令来实现双向绑定。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <input type="text" [(ngModel)]="username">
    {{username}}
  `,
})
export class AppComponent {
  username = 'semlinker';
}

第二节 - 添加简单的验证功能

如何为表单控件添加验证功能?

目前 Angular 支持的内建 validators 如下:

  • required - 设置表单控件值是非空的
  • email - 设置表单控件值的格式是 email
  • min - 设置表单控件值的最小值
  • max - 设置表单控件值的最大值
  • minlength - 设置表单控件值的最小长度
  • maxlength - 设置表单控件值的最大长度
  • pattern - 设置表单控件的值需匹配 pattern 对应的模式

接下来我们来添加最简单的 “必填” 校验。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <input 
     type="text" 
     required
     [(ngModel)]="username">
    {{username}}
  `,
})
export class AppComponent {
  username = 'semlinker';
}

如何判断表单控件是否通过验证?

在 Angular 中,我们可以通过 #userName="ngModel" 方式获取 ngModel 对象,然后通过 userName.valid 判断表单控件是否通过验证。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <input 
     type="text" 
     required
     [(ngModel)]="username"
     #userName="ngModel">
    {{userName.valid}}
  `,
})
export class AppComponent {
  username = 'semlinker';
}

第三节 - 显示验证失败的错误信息

如何显示验证失败的错误信息?

在 Angular 中,我们可以通过 #userName="ngModel" 方式获取 ngModel 对象,然后通过该对象的 errors 属性,来获取对应验证规则 (如 required, minlength 等) 的验证状态。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <input 
     type="text" 
     required
     minlength="3"
     [(ngModel)]="username"
     #userName="ngModel">
	<hr>
    <div *ngIf="userName.errors?.required">请您输入用户名</div>
    <div *ngIf="userName.errors?.minlength">
      用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}},当前的长度为
    	{{userName.errors?.minlength.actualLength}}
    </div>
  `,
})
export class AppComponent {
  username = 'semlinker';
}

第四节 - 创建表单

如何使用表单?

在 Angular 中,我们可以使用熟悉的 <form> 标签来创建表单。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <form>
    <input 
     type="text" 
     required
     minlength="3"
     name="username"
     [(ngModel)]="username"
     #userName="ngModel">
    <hr>
    <div *ngIf="userName.errors?.required">请您输入用户名</div>
    <div *ngIf="userName.errors?.minlength">
      用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}},当前的长度为
    	{{userName.errors?.minlength.actualLength}}
    </div>
    <button type="submit">提交</button>
  </form>
  `,
})
export class AppComponent {
  username = 'semlinker';
}

需要注意的是,在使用 <form> 标签后,我们的 username 输入框,必须添加 name 属性。

如何获取表单提交的值?

在 Angular 中,我们可以通过 #loginForm="ngForm" 方式获取 ngForm 对象,然后通过 loginForm.value 来获取表单的值。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
    <input 
     type="text" 
     required
     minlength="3"
     name="username"
     [(ngModel)]="username"
     #userName="ngModel">
    <hr>
    <div *ngIf="userName.errors?.required">请您输入用户名</div>
    <div *ngIf="userName.errors?.minlength">
      用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}},当前的长度为
    	{{userName.errors?.minlength.actualLength}}
    </div>
    <button type="submit">提交</button>
  </form>
  `,
})
export class AppComponent {
  username = 'semlinker';

  onSubmit(value) {
    console.dir(value);
  }
}

第五节 - ngModelGroup简介

ngModelGroup 有什么作用?

ngModelGroup 指令是 Angular 表单中提供的另一特殊指令,可以对表单输入内容进行分组,方便我们在语义上区分不同性质的输入。

比如联系人的信息包括姓名及住址,现在需对姓名和住址进行精细化信息收集,姓名可精细化成姓和名字,地址可精细化成城市、区、街等。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
   <fieldset ngModelGroup="user">
    <input 
     type="text" 
     required
     minlength="3"
     name="username"
     [(ngModel)]="username"
     #userName="ngModel">
    <hr>
    <div *ngIf="userName.errors?.required">请您输入用户名</div>
    <div *ngIf="userName.errors?.minlength">
      用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}},当前的长度为
    	{{userName.errors?.minlength.actualLength}}
    </div>
    <input type="password" ngModel name="password">
   </fieldset>
    <button type="submit">提交</button>
    <hr>
  </form>
  `,
})
export class AppComponent {
  username = 'semlinker';

  onSubmit(value) {
    console.dir(value);
  }
}

运行以上代码,点击提交按钮后的输出结果:

{ "user": { "username": "semlinker", "password": "123" } }

第六节 - 表单添加验证状态样式

如何为表单添加验证状态样式信息?

在 Angular 表单中,若验证通过则会在表单控件上添加 ng-valid 类,若验证失败则会在表单控件上添加 ng-invalid 类。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  styles: [`
   input.ng-invalid {
       border: 3px solid red;
    }
   input.ng-valid {
       border: 3px solid green;
    }
  `
  ],
  template: `
  <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
   <fieldset ngModelGroup="user">
    <input 
     type="text" 
     required
     minlength="3"
     name="username"
     [(ngModel)]="username"
     #userName="ngModel">
    <hr>
    <div *ngIf="userName.errors?.required">请您输入用户名</div>
    <div *ngIf="userName.errors?.minlength">
      用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}},当前的长度为
    	{{userName.errors?.minlength.actualLength}}
    </div>
    <input type="password" required ngModel name="password">
   </fieldset>
    <button type="submit">提交</button>
  </form>
  `,
})
export class AppComponent {
  username = 'semlinker';

  onSubmit(value) {
    console.dir(value);
  }
}

第七节 - 表单控件的状态

表单控件除了 valid 状态外,还包含哪些状态?

在 Angular 中表单控件有以下状态,我们可以通过 #userName="ngModel" 方式获取 ngModel 对象,进而获取控件的状态信息。

表单控制的状态:

  • valid - 表单控件有效
  • invalid - 表单控件无效
  • pristine - 表单控件值未改变
  • dirty - 表单控件值已改变
  • touched - 表单控件已被访问过
  • untouched - 表单控件未被访问过
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  styles: [`
   input.ng-invalid {
       border: 3px solid red;
    }
   input.ng-valid {
       border: 3px solid green;
    }
  `
  ],
  template: `
  <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
   <fieldset ngModelGroup="user">
    <input 
     type="text" 
     required
     minlength="3"
     name="username"
     [(ngModel)]="username"
     #userName="ngModel">
    <hr>
    <p>Name控件的valid状态:{{userName.valid}} - 表示控件有效</p>
    <p>Name控件的invalid状态:{{userName.invalid}} - 表示控件无效</p>
    <p>Name控件的pristine状态:{{userName.pristine}} - 表示控件值未改变</p>
    <p>Name控件的dirty状态:{{userName.dirty}} - 表示控件值已改变</p>
    <p>Name控件的touched状态:{{userName.touched}} - 表示控件已被访问过</p>
    <p>Name控件的untouched状态:{{userName.untouched}} - 表示控件未被访问过</p>
    <div *ngIf="userName.errors?.required">请您输入用户名</div>
    <div *ngIf="userName.errors?.minlength">
      用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}},当前的长度为
    	{{userName.errors?.minlength.actualLength}}
    </div>
    <input type="password" required ngModel name="password">
   </fieldset>
    <button type="submit">提交</button>
  </form>
  `,
})
export class AppComponent {
  username = 'semlinker';

  onSubmit(value) {
    console.dir(value);
  }
}

第八节 - 使用单选控件

如何添加单选控件?

在 Angular 中,我们通过 <input name="***" type="radio"> 方式添加单选控件。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <form #loginForm="ngForm">
    Angular版本:
    <div *ngFor="let version of versions;">
        <input 
          [attr.id]="version"
           name="version"
           ngModel
           required
    	   [value]="version"
		    type="radio">
		 <label [attr.for]="version">{{version}}</label>
	  </div>
  </form>
  `,
})
export class AppComponent {
  versions = ['1.x', '2.x', '3.x'];
}

第九节 - 使用多选控件

如何添加多选控件?

在 Angular 中,我们通过 <select name="***"> 方式添加多选控件。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <form #loginForm="ngForm">
    Angular版本:
    <select name="version" [ngModel]="versions[0]">
	  	<option
	  	 *ngFor="let version of versions;"
	  	  [value]="version">
	  		{{version}}
	    </option>
	  </select>
  </form>
  `,
})
export class AppComponent {
  versions = ['1.x', '2.x', '3.x'];
}

如何添加必填验证?

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  styles: [`
   select.ng-invalid + label:after {
      content: '<-- 请选择版本!'
    }
  `
  ],
  template: `
  <form #loginForm="ngForm">
    Angular版本:
    <div>
      <select name="version" [ngModel]="version" required>
        <option
        *ngFor="let version of versions;"
          [value]="version">
          {{version}}
        </option>
      </select>
      <label></label>
    </div>
  </form>
  `,
})
export class AppComponent {
  versions = ['','1.x', '2.x', '4.x', '6.x'];
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ui-select官方教程(一)——入门简介

    https://github.com/angular-ui/ui-select/wiki

    逝兮诚
  • AngularJS系列(二)——作用域和控制器

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    逝兮诚
  • AngularJS系列(十一)——路由和复制

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    逝兮诚
  • AngularJS系列(一)——常用指令

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    逝兮诚
  • Modern Web Development, Design and Deployment

    Modern web development, design and deployment can be effectively described as ev...

    用户4822892
  • AngularJS-tree教程

    AngularJS-tree是AngularJS官方出品的tree控件,它与AngularJS无缝组合、且方便实用。AngularJS-tree的github官...

    逝兮诚
  • 为什么不学基于TypeScript的Node.js服务端开发?

    我们早就知道,如今的JavaScript已经不再是当初那个在浏览器网页中写写简单的表单验证、没事弹个alert框吓吓人的龙套角色了。借助基于v8引擎的Node....

    一斤代码
  • AngularJS系列(四)——服务

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    逝兮诚
  • 前端 MVVM 模式中的数据层(Model)实战应用

    当今时代,React、Vue、AngularJS 三大框架横行,我们很难争论出哪个是最好的框架,但三者共同点是 MVVM 的模式,用一张简单的图可以看到,MVV...

    CSDN技术头条
  • Angular React Vue我应该选择什么?

    为 web 应用选择 JavaScript 开发框架是一件很费脑筋的事。现如今 Angular 和 React 非常流行,并且最近出现的新贵 VueJS 同样博...

    gemron的空间

扫码关注云+社区

领取腾讯云代金券