好资源导航 » 文章资讯 » 详解Angular 4 表单快速入门

详解Angular 4 表单快速入门

2024-02-20 20:11:03 53

基础知识

AngularCLI基本使用

安装AngularCLI(可选)

npminstall-g@angular/cli

创建新的项目

ngnewPROJECT-NAME

启动本地服务器

cdPROJECT-NAME
ngserve

AngularForms简介

Angular4中有两种表单：

TemplateDrivenForms-模板驱动式表单(类似于AngularJS1.x中的表单)
ReactiveForms-响应式表单

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

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

如何实现双向绑定？

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

import{Component}from'@angular/core';

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

{{username}}
`,
})
exportclassAppComponent{
username='semlinker';
}

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

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

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

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

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

import{Component}from'@angular/core';

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

{{username}}
`,
})
exportclassAppComponent{
username='semlinker';
}

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

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

import{Component}from'@angular/core';

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

{{userName.valid}}
`,
})
exportclassAppComponent{
username='semlinker';
}

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

如何显示验证失败的错误信息？

在Angular中，我们可以通过#userName="ngModel"方式获取ngModel对象，然后通过该对象的errors属性，来获取对应验证规则(如required,minlength等)的验证状态。

import{Component}from'@angular/core';

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


请您输入用户名

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

`, }) exportclassAppComponent{ username='semlinker'; }

第四节-创建表单

如何使用表单？

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

标签来创建表单。

import{Component}from'@angular/core';

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



请您输入用户名

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

提交 `, }) exportclassAppComponent{ username='semlinker'; }

需要注意的是，在使用

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

如何获取表单提交的值？

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

import{Component}from'@angular/core';

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



请您输入用户名

用户名的长度必须大于{{userName.errors?.minlength.requiredLength}}，当前的长度为 {{userName.errors?.minlength.actualLength}} 提交 {{loginForm.value|json}} `, }) exportclassAppComponent{ username='semlinker'; onSubmit(value){ console.dir(value); } }

第五节-ngModelGroup简介

ngModelGroup有什么作用？

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

import{Component}from'@angular/core';

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




请您输入用户名

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



提交

{{loginForm.value|json}}

`,
})
exportclassAppComponent{
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:3pxsolidred;
}
input.ng-valid{
border:3pxsolidgreen;
}
`
],
template:`




请您输入用户名

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



提交

{{loginForm.value|json}}

`,
})
exportclassAppComponent{
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:3pxsolidred;
}
input.ng-valid{
border:3pxsolidgreen;
}
`
],
template:`




Name控件的valid状态：{{userName.valid}}-表示控件有效
Name控件的invalid状态：{{userName.invalid}}-表示控件无效
Name控件的pristine状态：{{userName.pristine}}-表示控件值未改变
Name控件的dirty状态：{{userName.dirty}}-表示控件值已改变
Name控件的touched状态：{{userName.touched}}-表示控件已被访问过
Name控件的untouched状态：{{userName.untouched}}-表示控件未被访问过
请您输入用户名

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



提交

{{loginForm.value|json}}

`,
})
exportclassAppComponent{
username='semlinker';

onSubmit(value){
console.dir(value);
}
}

第八节-使用单选控件

如何添加单选控件？

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

import{Component}from'@angular/core';

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

Angular版本：


{{version}}


{{loginForm.value|json}}

`,
})
exportclassAppComponent{
versions=['1.x','2.x','3.x'];
}

第九节-使用多选控件

如何添加多选控件？

在Angular中，我们通过方式添加多选控件。

import{Component}from'@angular/core';

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

Angular版本：




{{loginForm.value|json}}

`,
})
exportclassAppComponent{
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}}

`,
})
exportclassAppComponent{
versions=['','1.x','2.x','3.x'];
}

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

返回顶部
514930285
czq8825@qq.com

详解Angular 4 表单快速入门

热门推荐

随机推荐