详解Angular 4 表单快速入门

基础知识

Angular CLI 基本使用

安装 Angular CLI (可选)

rush:bash;"> npm install -g @angular/cli

创建新的项目

rush:plain;"> ng new PROJECT-NAME

启动本地服务器

rush:bash;"> cd PROJECT-NAME ng serve

Angular Forms 简介

Angular 4 中有两种表单：

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

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

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

如何实现双向绑定？

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

rush:js;"> import { Component } from '@angular/core';

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

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

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

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

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

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

rush:js;"> import { Component } from '@angular/core';

@Component({
selector: 'app-root',template: <input type="text" <a href="https://www.jb51.cc/tag/required/" target="_blank" class="keywords">required</a> [(ngModel)]="username"&gt; {{username}} ,})
export class AppComponent {
username = 'semlinker';
}

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

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

rush:js;"> 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 等) 的验证状态。

rush:js;"> import { Component } from '@angular/core';

@Component({
selector: 'app-root',template: `
<input
type="text"
required
minlength="3"
[(ngModel)]="username"

userName="ngModel">

<div ngIf="userName.errors?.required">请您输入用户名

<div ngIf="userName.errors?.minlength">
用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为
{{userName.errors?.minlength.actualLength}}