Angular4编程之表单响应功能示例


Posted in Javascript onDecember 13, 2017

本文实例讲述了Angular4表单响应功能。分享给大家供大家参考,具体如下:

响应式表单

1、响应式表单需要在appmodule文件中注入响应式表单模块

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
<!--
  这里引用模块的时候要注意,具体是哪个module文件使用了表单,
  因为在某些情况下表单是被appmodule下的某个子module文件使用,
  那么就要在该子module文件中引入响应式表单模块。
-->
@NgModule(
  {imports: [FormsModule, ReactiveFormsModule……]
  ……}

2、form.component.ts组件当中引用

第一种方式:

import { Component } from '@angular/core';
import { FormGroup, FormControl, FormBuilder} from '@angular/forms';
@Component({
 templateUrl: 'forms.component.html'
})
export class FormsComponent {
 formModel: FormGroup;
 constructor(fb: FormBuilder) {
  this.formModel= fb.group({
   formControl1: [''],
   formControl2: [''],
   ……
  });
 }
 onSubmit () {
  console.log(this.formModel.value);
 }
}

第二种方式:

import { Component } from '@angular/core';
import { FormGroup, FormControl} from '@angular/forms';
@Component({
 templateUrl: 'forms.component.html'
})
export class FormsComponent {
 formModel: FormGroup; /*这里定义表单变量名,HTML文件中绑定时使用*/
 constructor() {
  this.formModel= new FormGroup({
    formControl1: new FormControl(),
    formControl2: new FormControl(),
    ……
  });
 }
 onSubmit () {
  console.log(this.formModel.value);
 }
}

3、对应的HTML文件

<form action="" method="post" [formGroup]='formModel'> <!-- 通过指令绑定ts文件中命名的变量名 --!>
  <div class="form-group row">
   <div class="col-md-6">
    <div class="row">
     <label>formControl1</label>
     <input type="text" formControlName='formControl1'>
    </div>
   </div>
   <div class="col-md-6">
    <div class="row">
     <label>formControl2</label>
    <input type="text" formControlName='formControl2'>
    </div>
   </div>
  </div>
</form>

至此,一份简单的响应式表单就完成了

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
jQuery之动画效果大全
Nov 09 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
详解AngularJS之$window窗口对象
Jan 17 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 Javascript
全面解析Vue中的$nextTick
Dec 24 Vue.js
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 Javascript
JavaScript实现前端倒计时效果
Feb 09 Javascript
element tree树形组件回显数据问题解决
Aug 14 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 #Javascript
vue登录路由验证的实现
Dec 13 #Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 #Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 #Javascript
vue组件中使用iframe元素的示例代码
Dec 13 #Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 #Javascript
vue实现nav导航栏的方法
Dec 13 #Javascript
You might like
第十四节 命名空间 [14]
2006/10/09 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
json 定义
2008/06/10 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
python将ansible配置转为json格式实例代码
2017/05/15 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
python sort、sort_index方法代码实例
2019/03/28 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
基于Python实现扑克牌面试题
2019/12/11 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
蔻驰美国官网:COACH美国
2016/08/18 全球购物
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
电信营业员自我评价分享
2014/01/17 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
检讨书范文
2015/01/27 职场文书
信仰观后感
2015/06/03 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS