基础知识
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 (模板驱动式表单) 的基础知识，相关的知识点会以问答的形式进行介绍。
第一节 - 创建最简单的输入框
如何实现双向绑定？
在 Angular 表单中，我们通过 ngModel 指令来实现双向绑定。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
{{username}}
`,
})
export class AppComponent {
username = 'semlinker';
}
第二节 - 添加简单的验证功能
如何为表单控件添加验证功能？
目前 Angular 支持的内建 validators 如下：
接下来我们来添加最简单的 必填 校验。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
{{username}}
`,
})
export class AppComponent {
username = 'semlinker';
}
如何判断表单控件是否通过验证？
在 Angular 中，我们可以通过 #userName="ngModel" 方式获取 ngModel 对象，然后通过 userName.valid 判断表单控件是否通过验证。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
{{userName.valid}}
`,
})
export class AppComponent {
username = 'semlinker';
}
第三节 - 显示验证失败的错误信息
如何显示验证失败的错误信息？
在 Angular 中，我们可以通过 #userName="ngModel" 方式获取 ngModel 对象，然后通过该对象的 errors 属性，来获取对应验证规则 (如 required, minlength 等) 的验证状态。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
请您输入用户名
用户名的长度必须大于 {{userName.errors&＃63;.minlength.requiredLength}}，当前的长度为
{{userName.errors&＃63;.minlength.actualLength}}
`,
})
export class AppComponent {
username = 'semlinker';
}
第四节 - 创建表单
如何使用表单？
在 Angular 中，我们可以使用熟悉的 标签来创建表单。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
请您输入用户名
用户名的长度必须大于 {{userName.errors&＃63;.minlength.requiredLength}}，当前的长度为
{{userName.errors&＃63;.minlength.actualLength}}
`,
})
export class AppComponent {
username = 'semlinker';
}
需要注意的是，在使用 标签后，我们的 username 输入框，必须添加 name 属性。
如何获取表单提交的值？
在 Angular 中，我们可以通过 #loginForm="ngForm" 方式获取 ngForm 对象，然后通过 loginForm.value 来获取表单的值。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
请您输入用户名
用户名的长度必须大于 {{userName.errors&＃63;.minlength.requiredLength}}，当前的长度为
{{userName.errors&＃63;.minlength.actualLength}}
{{loginForm.value | json}}
`,
})
export class AppComponent {
username = 'semlinker';
onSubmit(value) {
console.dir(value);
}
}
第五节 - ngModelGroup简介
ngModelGroup 有什么作用？
ngModelGroup 指令是 Angular 表单中提供的另一特殊指令，可以对表单输入内容进行分组，方便我们在语义上区分不同性质的输入。例如联系人的信息包括姓名及住址，现在需对姓名和住址进行精细化信息收集，姓名可精细化成姓和名字，地址可精细化成城市、区、街等。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
以上代码成功运行后，{{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: `
第七节 - 表单控件的状态
表单控件除了 valid 状态外，还包含哪些状态？
在 Angular 中表单控件有以下 6 种状态，我们可以通过 #userName="ngModel" 方式获取 ngModel 对象，进而获取控件的状态信息。具体状态如下：
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: `
第八节 - 使用单选控件
如何添加单选控件？
在 Angular 中，我们通过 方式添加单选控件。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
Angular版本：
{{loginForm.value | json}}
`,
})
export class AppComponent {
versiOns= ['1.x', '2.x', '3.x'];
}
第九节 - 使用多选控件
如何添加多选控件？
在 Angular 中，我们通过 方式添加多选控件。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
Angular版本：
{{loginForm.value | json}}
`,
})
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: `
Angular版本：
{{loginForm.value | json}}
`,
})
export class AppComponent {
versiOns= ['','1.x', '2.x', '3.x'];
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 