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 表单取值常用代码
Dec 22 Javascript
jQuery 动画弹出窗体支持多种展现方式
Apr 29 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
浅谈关于vue中scss公用的解决方案
Dec 02 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
php实现给一张图片加上水印效果
2016/01/02 PHP
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
Python学习笔记_数据排序方法
2014/05/22 Python
初步解析Python下的多进程编程
2015/04/28 Python
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
使用TensorFlow实现SVM
2018/09/06 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
python关于变量名的基础知识点
2020/03/03 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
python实现控制台输出彩色字体
2020/04/05 Python
Python之字典添加元素的几种方法
2020/09/30 Python
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
党员的自我评价范文
2014/01/02 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
幼儿园毕业寄语
2014/04/03 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
2014年法院工作总结
2014/11/24 职场文书
开票员岗位职责
2015/02/12 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书