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" [(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" [(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 有什么作用？