详解Angular 4 表单快速入门


Posted in Javascript onJune 05, 2017

基础知识

Angular CLI 基本使用

安装 Angular CLI (可选)

npm install -g @angular/cli

创建新的项目

ng new PROJECT-NAME

启动本地服务器

cd PROJECT-NAME
ng serve

Angular Forms 简介

Angular 4 中有两种表单:

  1. Template Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 )
  2. 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 如下:

  1. required - 设置表单控件值是非空的
  2. email - 设置表单控件值的格式是 email
  3. minlength - 设置表单控件值的最小长度
  4. maxlength - 设置表单控件值的最大长度
  5. 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 对象,进而获取控件的状态信息。具体状态如下:

  1. valid - 表单控件有效
  2. invalid - 表单控件无效
  3. pristine - 表单控件值未改变
  4. dirty - 表单控件值已改变
  5. touched - 表单控件已被访问过
  6. 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'];
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
Javascript中的Split使用方法与技巧
Mar 09 Javascript
JavaScript类和继承 constructor属性
Mar 04 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
原生JS实现图片网格式渐显、渐隐效果
Jun 05 #Javascript
Node.js开发第三方微信公众平台
Jun 05 #Javascript
js自定义Tab选项卡效果
Jun 05 #Javascript
纯js实现动态时间显示
Sep 07 #Javascript
深入理解Angular.JS中的Scope继承
Jun 04 #Javascript
yarn的使用与升级Node.js的方法详解
Jun 04 #Javascript
npm国内镜像 安装失败的几种解决方案
Jun 04 #Javascript
You might like
教你如何把一篇文章按要求分段
2006/10/09 PHP
php设计模式之单例模式使用示例
2014/01/20 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
浅析JavaScript事件和方法
2015/02/28 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
详解ES6中的let命令
2020/04/05 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
js禁止浏览器的回退事件
2017/04/20 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
Python实现线程状态监测简单示例
2018/03/28 Python
Django后台admin的使用详解
2019/07/08 Python
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
财务会计应届生求职信
2013/11/24 职场文书
电力公司个人求职信范文
2014/02/04 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
Python进度条的使用
2021/05/17 Python
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server