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 相关文章推荐
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 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
php cookie 登录验证示例代码
2009/03/16 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
关于php开启错误提示的总结
2019/09/24 PHP
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
vue实现按钮切换图片
2021/01/20 Vue.js
jquery实现广告上下滚动效果
2021/03/04 jQuery
Windows下安装python2.7及科学计算套装
2015/03/05 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
C++程序员求职信范文
2014/04/14 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
酒桌上的开场白
2015/06/01 职场文书
大学同学聚会感言
2015/07/30 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书