详解Angular 4 表单快速入门

基础知识

Angular CLI 基本使用

安装 Angular CLI (可选)

npm install -g @angular/cli

创建新的项目

ng new PROJECT-NAME

启动本地服务器

cd PROJECT-NAME
ng serve

Angular Forms 简介

Angular 4 中有两种表单:

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

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

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

如何实现双向绑定?

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

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

@Component({
 selector: 'app-root',
 template: `
  
  {{username}}
 `,
})
export class AppComponent {
 username = 'semlinker';
}

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

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

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

  1. required - 设置表单控件值是非空的
  2. email - 设置表单控件值的格式是 email
  3. minlength - 设置表单控件值的最小长度
  4. maxlength - 设置表单控件值的最大长度
  5. pattern - 设置表单控件的值需匹配 pattern 对应的模式

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

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

@Component({
 selector: 'app-root',
 template: `
  
  {{username}}
 `,
})
export class AppComponent {
 username = 'semlinker';
}

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

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

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

@Component({
 selector: 'app-root',
 template: `
  
  {{userName.valid}}
 `,
})
export class AppComponent {
 username = 'semlinker';
}

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

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

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

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

@Component({
 selector: 'app-root',
 template: `
  
  
请您输入用户名
用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}},当前的长度为 {{userName.errors?.minlength.actualLength}}
`, }) export class AppComponent { username = 'semlinker'; }

第四节 - 创建表单

如何使用表单?

在 Angular 中,我们可以使用熟悉的

标签来创建表单。

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

@Component({
 selector: 'app-root',
 template: `
 
  
  
请您输入用户名
用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}},当前的长度为 {{userName.errors?.minlength.actualLength}}
`, }) export class AppComponent { username = 'semlinker'; }

需要注意的是,在使用

标签后,我们的 username 输入框,必须添加 name 属性。

如何获取表单提交的值?

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

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

@Component({
 selector: 'app-root',
 template: `
 
  
  
请您输入用户名
用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}},当前的长度为 {{userName.errors?.minlength.actualLength}}
{{loginForm.value | json}} `, }) export class AppComponent { username = 'semlinker'; onSubmit(value) { console.dir(value); } }

第五节 - ngModelGroup简介

ngModelGroup 有什么作用?

ngModelGroup 指令是 Angular 表单中提供的另一特殊指令,可以对表单输入内容进行分组,方便我们在语义上区分不同性质的输入。例如联系人的信息包括姓名及住址,现在需对姓名和住址进行精细化信息收集,姓名可精细化成姓和名字,地址可精细化成城市、区、街等。

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

@Component({
 selector: 'app-root',
 template: `
 

请您输入用户名
用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}},当前的长度为 {{userName.errors?.minlength.actualLength}}

{{loginForm.value | json}}
`, }) export class AppComponent { username = 'semlinker'; onSubmit(value) { console.dir(value); } }

以上代码成功运行后,{{loginForm.value | json}} 的输出结果:

{ "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: `
 

请您输入用户名
用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}},当前的长度为 {{userName.errors?.minlength.actualLength}}

{{loginForm.value | json}}
`, }) export class AppComponent { username = 'semlinker'; onSubmit(value) { console.dir(value); } }

第七节 - 表单控件的状态

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

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

  1. valid - 表单控件有效
  2. invalid - 表单控件无效
  3. pristine - 表单控件值未改变
  4. dirty - 表单控件值已改变
  5. touched - 表单控件已被访问过
  6. 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: `
 

Name控件的valid状态:{{userName.valid}} - 表示控件有效

Name控件的invalid状态:{{userName.invalid}} - 表示控件无效

Name控件的pristine状态:{{userName.pristine}} - 表示控件值未改变

Name控件的dirty状态:{{userName.dirty}} - 表示控件值已改变

Name控件的touched状态:{{userName.touched}} - 表示控件已被访问过

Name控件的untouched状态:{{userName.untouched}} - 表示控件未被访问过

请您输入用户名
用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}},当前的长度为 {{userName.errors?.minlength.actualLength}}

{{loginForm.value | json}}
`, }) export class AppComponent { username = 'semlinker'; onSubmit(value) { console.dir(value); } }

第八节 - 使用单选控件

如何添加单选控件?

在 Angular 中,我们通过 方式添加单选控件。

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

@Component({
 selector: 'app-root',
 template: `
 
Angular版本:

{{loginForm.value | json}}
`, }) export class AppComponent { versions = ['1.x', '2.x', '3.x']; }

第九节 - 使用多选控件

如何添加多选控件?

在 Angular 中,我们通过


{{loginForm.value | json}} `, }) 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: `
 
Angular版本:

{{loginForm.value | json}}
`, }) export class AppComponent { versions = ['','1.x', '2.x', '3.x']; }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(详解Angular 4 表单快速入门)