Angular 4 表单快速入门
栏目: JavaScript · 发布时间: 7年前
内容简介:Angular 4 表单快速入门
主要内容
-
第一节 - 创建最简单的输入框
-
第二节 - 添加简单的验证功能
-
第三节 - 显示验证失败的错误信息
-
第四节 - 创建表单
-
第五节 - ngModelGroup简介
-
第六节 - 表单添加验证状态样式
-
第七节 - 表单控件的状态
-
第八节 - 使用单选控件
-
第九节 - 使用多选控件
阅读须知
本教程的开发环境及开发语言:
基础知识
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" name="username" [(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" name="username" [(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 有什么作用?
ngModelGroup 指令是 Angular 表单中提供的另一特殊指令,可以对表单输入内容进行分组,方便我们在语义上区分不同性质的输入。例如联系人的信息包括姓名及住址,现在需对姓名和住址进行精细化信息收集,姓名可精细化成姓和名字,地址可精细化成城市、区、街等。
import { Component } from '@angular/core'; @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"> <hr> <div *ngIf="userName.errors?.required">请您输入用户名</div> <div *ngIf="userName.errors?.minlength"> 用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}},当前的长度为 {{userName.errors?.minlength.actualLength}} </div> <input type="password" ngModel name="password"> </fieldset> <button type="submit">提交</button> <hr> {{loginForm.value | json}} </form> `, }) export class AppComponent { 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: 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"> <hr> <div *ngIf="userName.errors?.required">请您输入用户名</div> <div *ngIf="userName.errors?.minlength"> 用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}},当前的长度为 {{userName.errors?.minlength.actualLength}} </div> <input type="password" required ngModel name="password"> </fieldset> <button type="submit">提交</button> <hr> {{loginForm.value | json}} </form> `, }) export class AppComponent { 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: 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"> <hr> <p>Name控件的valid状态:{{userName.valid}} - 表示控件有效</p> <p>Name控件的invalid状态:{{userName.invalid}} - 表示控件无效</p> <p>Name控件的pristine状态:{{userName.pristine}} - 表示控件值未改变</p> <p>Name控件的dirty状态:{{userName.dirty}} - 表示控件值已改变</p> <p>Name控件的touched状态:{{userName.touched}} - 表示控件已被访问过</p> <p>Name控件的untouched状态:{{userName.untouched}} - 表示控件未被访问过</p> <div *ngIf="userName.errors?.required">请您输入用户名</div> <div *ngIf="userName.errors?.minlength"> 用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}},当前的长度为 {{userName.errors?.minlength.actualLength}} </div> <input type="password" required ngModel name="password"> </fieldset> <button type="submit">提交</button> <hr> {{loginForm.value | json}} </form> `, }) export class AppComponent { username = 'semlinker'; onSubmit(value) { console.dir(value); } }
第八节 - 使用单选控件
如何添加单选控件?
在 Angular 中,我们通过 <input name="***" type="radio">
方式添加单选控件。
import { Component } from '@angular/core'; @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}}</label> </div> <hr> {{loginForm.value | json}} </form> `, }) export class AppComponent { versions = ['1.x', '2.x', '3.x']; }
第九节 - 使用多选控件
如何添加多选控件?
在 Angular 中,我们通过 <select name="***">
方式添加多选控件。
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <form #loginForm="ngForm"> Angular版本: <select name="version" [ngModel]="versions[0]"> <option *ngFor="let version of versions;" [value]="version"> {{version}} </option> </select> <hr> {{loginForm.value | json}} </form> `, }) 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: ` <form #loginForm="ngForm"> Angular版本: <div> <select name="version" [ngModel]="version" required> <option *ngFor="let version of versions;" [value]="version"> {{version}} </option> </select> <label></label> </div> <hr> {{loginForm.value | json}} </form> `, }) export class AppComponent { versions = ['','1.x', '2.x', '3.x']; }
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- React入门系列 - 5. 表单与变量的关联
- Flask框架从入门到精通之模板表单(二十)
- 表单 – 避免Symfony强制显示表单字段
- 细说 Angular 2+ 的表单(二):响应式表单
- 8款最新CSS3表单 环形表单很酷
- 动态表单 form-create 2.5 版本来啦,帮你轻松搞定表单
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。