Angular 4 表单

Angular 4 表单

目录

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

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

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

第四节 - 创建表单

第五节 - ngModelGroup简介

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

第七节 - 表单控件的状态

第八节 - 使用单选控件

第九节 - 使用多选控件

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

Angular 4 +

Angular CLI

TypeScript

基础知识

Angular CLI 基本使用

安装 Angular CLI (可选)

npm install -g @angular/cli

创建新的项目

ng new PROJECT-NAME

启动本地服务器

cd PROJECT-NAMEng serve

Angular Forms 简介

Angular 4 中有两种表单：

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

• Reactive Forms - 响应式表单

本文主要介绍 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

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>
    {{loginForm.value | json}}
  </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>
    {{loginForm.value | json}} 
     </form> 
      `,})
      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:
     <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>
        <hr>
        {{loginForm.value | json}}
        </form>  `,})
        export class AppComponent {
        username = 'semlinker';  
        onSubmit(value) { 
           console.dir(value); 
            }}

第七节 - 表单控件的状态

表单控件除了 valid 状态外，还包含哪些状态？

在 Angular 中表单控件有以下 6 种状态，我们可以通过 #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>
    <hr>
    {{loginForm.value | json}}  </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>
  <hr>
  {{loginForm.value | json}}
  </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>
<hr>
{{loginForm.value | json}}
</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>
     <hr>
     {{loginForm.value | json}}
     </form>  `,})
     export class AppComponent { 
      versions = ['','1.x', '2.x', '3.x'];
      }