Angular2.js实现表单验证详解


Posted in Javascript onJune 23, 2017

表单创建一个有效、引人注目的数据输入体验。Angular表单协调一组数据绑定控件,跟踪变更。验证输入的有效性,并且显示错误信息。

接下来,主要内容有:

1、使用组件和模板构建Angular表单;

2、用ngModel创建数据绑定,以读取和写入输入控件的值。

构建Angular表单

我们想构建包含姓名,电话,特长三个字段的表单

1、我们可以参照快速启动那篇,创建一个名为forms的新项目,也可以使用之前的项目进行修改;

2、创建Person类;

3、创建控制此表单的组件;

4、创建具有初始表单布局的模板;

5、使用ngModel双向数据绑定语法把数据属性绑定到每个表单控件中。

创建Person类

在app文件夹下创建hero.ts文件,内容为

export class Person{
  constructor(
    public id:number,
    public name:string,
    public ownpower:string,
    public power?:string //可填可不填,可选的 ?不能省略
  ){}
}
//创建一个类,定义它的属性

TypeScript编译器为每个public构造函数参数生成一个公共字段,在创建一个新的Person实例时,自动把参数赋给这些公共字段。

创建表单组件

在app文件夹下创建hero-form-component.ts文件:

import { Component } from '@angular/core';
import {Person} from './hero'; //引入hero.ts中的Person类
@Component({
  moduleId:module.id,//属性设置了基地址,用于从相对路径加载form.html模板文件
  selector: 'hero-form',//在模板中创建添加<hero-form>标签
  templateUrl:'../form.html'//模板上增加form.html里面的内容
})
export class HeroFormComponent {
  powers=['唱歌','跳舞','弹琴','画画'];
  model=new Person(1,'小明','跳舞',this.powers[2]);//实例化
  submitted=false;
  onsubmit(){this.submitted=true;}
  get diagnostic(){return JSON.stringify(this.model);} //这个先暂时不管
}

1、这段代码导入了Angular核心库以及我们刚刚创建的Person模型;

2、@Component装饰器的选择器将<hero-form>标签把这个表单放进父模板;

3、moduleId:module.id属性设置了基地址,用于从相对模块路径加载templateUrl;

4、templateUrl属性指向一个独立的HTML模板文件,使用外联模板;

5、位model和powers提供了演示用的假数据;

6、在最后增加diagnostic属性,她返回这个模型的JSON形式。在开发过程中用于调试。

修改app.module.ts启动文件

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';//导入表单
import { AppComponent1 } from './app.component';
import{HeroFormComponent} from './hero-form.component';//导入新增加的组件类
//导入hero-form.component.ts中的HeroFormComponent
@NgModule({
imports: [
  BrowserModule,
  FormsModule //表单模板
],
declarations: [
  AppComponent1 ,
  HeroFormComponent //类名
],
bootstrap: [AppComponent1]
})
export class AppModule { }

1、导入FormsModule和新组件HeroFormComponent;

2、把FormModule添加到ngModel装饰器的imports列表中,这样应用就能访问模板驱动表单的所有特性,包括ngModel;

3、把HeroFormComponent添加到ngModule装饰器的declarations列表中,使HeroFormComponent组件在整个模块中可见。

修改app.component.ts文件

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',//在index.html中创建添加<my-app>标签
  //包裹<hero-form></hero-form>
  template:`<hero-form></hero-form>`
  //模板里面添加此标签(hero-form里面的内容)
})
export class AppComponent1{}

关于表单的组建模板构建完了。

创建初始HTML表单模板,上文提到的form.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>form表单</title>
</head>
<body>
<div class="container">
  <h1>个人信息</h1>
  <form>
    <div class="form-group">
      <label for="name">姓名</label>
      <input type="text" id="name" required class="form-control">
    </div>
    <div class="form-group">
      <label for="ownpower">特长</label>
      <input type="text" class="form-control" id="ownpower">
    </div>
    <div class="form-group">
      <label for="power">能力选择</label>
      <select class="form-control" id="power" required>
        <!--循环-->
        <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
      </select>
    </div>
    <button type="submit" class="btn btn-success">提交</button>
  </form>
</div>
</body>
</html>

我们可以使用css来美化表单,在index.html里面引入样式表文件

<!--样式表-->
  <link rel="stylesheet" href="css/bootstrap.min.css">

显示的效果为

Angular2.js实现表单验证详解

使用ngModel进行双向数据绑定[(ngModel)]语法

修改form.html文件,拿姓名做个实例

<div class="form-group">
      <label for="name">姓名,显示为{{model.name}}</label>
      <input type="text" id="name" required class="form-control" [(ngModel)]="model.name" name="name" #name1="ngModel">
      <!--双向绑定:{{model.name}}-->
      <!--使用ngModwl进行双向绑定,其绑定了model.name,所以所有有model。name的都可以同时变化-->
    </div>

效果为

Angular2.js实现表单验证详解

 好了,一个简单的表单就做好了,下一篇讲控制表单,校验错误等内容。

参考:https://angular.cn/docs/ts/latest/guide/forms.html

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

Javascript 相关文章推荐
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
微信小程序websocket聊天室的实现示例代码
Feb 12 Javascript
JS实现多张图片预览同步上传功能
Jun 23 #Javascript
Vue组件化通讯的实例代码
Jun 23 #Javascript
JavaScript字符串检索字符的方法
Jun 23 #Javascript
Angular2 组件通信的实例代码
Jun 23 #Javascript
js实现文字列表无缝滚动效果
Jun 23 #Javascript
jquery图片放大镜效果
Jun 23 #jQuery
Avalonjs双向数据绑定与监听的实例代码
Jun 23 #Javascript
You might like
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
javascript for循环设法提高性能
2010/02/24 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
html中table数据排序的js代码
2011/08/09 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
在漏洞利用Python代码真的很爽
2007/08/26 Python
跟老齐学Python之网站的结构
2014/10/24 Python
jupyter安装小结
2016/03/13 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
Python学习入门之区块链详解
2017/07/25 Python
Python函数装饰器实现方法详解
2018/12/22 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
教师对学生的评语
2014/04/28 职场文书
技校毕业生自荐书
2014/05/23 职场文书
企业培训简报范文
2015/07/20 职场文书
Spring Boot mybatis-config 和 log4j 输出sql 日志的方式
2021/07/26 Java/Android