基础知识

Angular CLI 基本使用

安装 Angular CLI (可选)

创建新的项目

启动本地服务器

Angular Forms 简介

Angular 4 中有两种表单：

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

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

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

如何实现双向绑定？

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

@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 对应的模式

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

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

 <input type="text" <a href="/tag/required/" target="_blank" class="keywords">required</a> [(ngModel)]="username"&gt; {{username}}

,})
export class AppComponent {
username = 'semlinker';
}

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

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

@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 等) 的验证状态。

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

userName="ngModel">

required">请您输入用户名

用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为 {{userName.errors?.minlength.actualLength}}

`,}) export class AppComponent { username = 'semlinker'; }

第四节 - 创建表单

如何使用表单？

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

需要注意的是，在使用

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

如何获取表单提交的值？

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

@Component({
selector: 'app-root',template: `
<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
<input
type="text"
required
minlength="3"
name="username"
[(ngModel)]="username"

userName="ngModel">

required">请您输入用户名

用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为 {{userName.errors?.minlength.actualLength}}

第五节 - ngModelGroup简介

ngModelGroup 有什么作用？

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

@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">

required">请您输入用户名

用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为 {{userName.errors?.minlength.actualLength}}

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

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

如何为表单添加验证状态样式信息？

在 Angular 表单中，若验证通过则会在表单控件上添加 ng-valid 类，若验证失败则会在表单控件上添加 ng-invalid 类。

@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">

required">请您输入用户名

用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为 {{userName.errors?.minlength.actualLength}}

required ngModel name="password">

第七节 - 表单控件的状态

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

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

valid - 表单控件有效
invalid - 表单控件无效
pristine - 表单控件值未改变
dirty - 表单控件值已改变
touched - 表单控件已被访问过
untouched - 表单控件未被访问过

userName="ngModel">

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

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

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

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

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

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

required">请您输入用户名

用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为 {{userName.errors?.minlength.actualLength}}

required ngModel name="password">

第八节 - 使用单选控件

如何添加单选控件？

在 Angular 中，我们通过 dio"> 方式添加单选控件。

@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}}

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

详解Angular 4 表单快速入门

基础知识

Angular CLI 基本使用

Angular Forms 简介

Angular 4 中有两种表单：

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

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

userName="ngModel">

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

userName="ngModel">

第四节 - 创建表单

userName="ngModel">

第五节 - ngModelGroup简介

userName="ngModel">

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

userName="ngModel">

第七节 - 表单控件的状态

userName="ngModel">

第八节 - 使用单选控件

第九节 - 使用多选控件

猜你在找的JavaScript相关文章