Angular 4 表单快速入门
目录
阅读须知本教程的开发环境及开发语言:
基础知识Angular CLI 基本使用
npm install -g @angular/cli
ng new PROJECT-NAME
cd PROJECT-NAME ng serve Angular Forms 简介Angular 4 中有两种表单:
本文主要介绍 Template Driven Forms (模板驱动式表单) 的基础知识,相关的知识点会以问答的形式进行介绍。 第一节 - 创建最简单的输入框如何实现双向绑定?在 Angular 表单中,我们通过 import { Component } from '@angular/core'; @Component({ selector: 'app-root',template: ` <input type="text" [(ngModel)]="username"> {{username}} `,}) export class AppComponent { username = 'semlinker'; } 第二节 - 添加简单的验证功能如何为表单控件添加验证功能?目前 Angular 支持的内建
接下来我们来添加最简单的 import { Component } from '@angular/core'; @Component({ selector: 'app-root',template: ` <input type="text" required [(ngModel)]="username"> {{username}} `,}) export class AppComponent { username = 'semlinker'; } 如何判断表单控件是否通过验证?在 Angular 中,我们可以通过 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 中,我们可以通过 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 中,我们可以使用熟悉的 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'; } 需要注意的是,在使用 如何获取表单提交的值?在 Angular 中,我们可以通过 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); } } 以上代码成功运行后, { "user": { "username": "semlinker","password": "123" } } 第六节 - 表单添加验证状态样式如何为表单添加验证状态样式信息?在 Angular 表单中,若验证通过则会在表单控件上添加 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); } } 第七节 - 表单控件的状态表单控件除了
|