编程 Javascript

详解Angular 4 表单快速入门

Posted in Javascript onJune 05, 2017

基础知识

Angular CLI 基本使用

安装 Angular CLI (可选)

npm install -g @angular/cli

创建新的项目

ng new PROJECT-NAME

启动本地服务器

cd PROJECT-NAME
ng 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'];
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

详解Angular 4 表单快速入门

- Author -

semlinker

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

动态添加js事件实现代码

Mar 12 Javascript

浅谈tudou土豆网首页图片延迟加载的效果

Jun 23 Javascript

Package.js 现代化的JavaScript项目make工具

May 23 Javascript

JSONP获取Twitter和Facebook文章数的具体步骤

Feb 24 Javascript

jQuery插件制作之全局函数用法实例

Jun 01 Javascript

javascript实现简单计算器效果【推荐】

Apr 19 Javascript

纯JS代码实现气泡效果

May 04 Javascript

Bootstrap基本组件学习笔记之分页(12)

Dec 08 Javascript

微信JS SDK接入的几点注意事项(必看篇)

Jun 23 Javascript

VUE axios发送跨域请求需要注意的问题

Jul 06 Javascript

Angular5中提取公共组件之radio list的实例代码

Jul 10 Javascript

Node.js npm命令运行node.js脚本的方法

Oct 10 Javascript

原生JS实现图片网格式渐显、渐隐效果

Jun 05 #Javascript

Node.js开发第三方微信公众平台

Jun 05 #Javascript

js自定义Tab选项卡效果

Jun 05 #Javascript

纯js实现动态时间显示

Sep 07 #Javascript

深入理解Angular.JS中的Scope继承

Jun 04 #Javascript

yarn的使用与升级Node.js的方法详解

Jun 04 #Javascript

npm国内镜像安装失败的几种解决方案

Jun 04 #Javascript