Angular 4 表单

简介:

一. 模板表单

1. 如下图

 

2. code

 3. 效果图

 

二、响应式表单

1. 增加ReactiveFormsModule

2.响应式表单用到的类和指令

 

3. 控制器代码

 

4. html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--响应式表单-->
< form  [formGroup]="formModel" (submit)="submit()">
 
    < input  formControlName="username">
   < div  formGroupName="dateRange">
     起始日期:< input   type="date" formControlName="from">
     截止日期:< input   type="date" formControlName="to">
   </ div >
 
  < div >
    < ul  formArrayName="emails">
      < li  *ngFor="let e of this.formModel.get('emails').controls; let i=index;">
        < input  type="text" [formControlName]="i">
      </ li >
    </ ul >
  </ div >
   < button  type="button" (click)="addEmail()">增加</ button >
   < div >< button  type="submit">保存</ button ></ div >
</ form >

  

6. 效果图

 

7. 使用FormBuild简化响应式表单代码

原来的写法

使用FormBuild简化



本文转自Work Hard Work Smart博客园博客,原文链接:http://www.cnblogs.com/linlf03/p/7344491.html,如需转载请自行联系原作者

目录
相关文章
|
API
Angular 2.x折腾记 :(7) 初步了解表单:模板驱动及数据驱动及脱坑要点
表单在整个系统中的作用相当重要,这里主要扯下响应表单的实现方式。 首先需要操作表单的模块引入这两个模块; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
153 0
|
JavaScript 前端开发 容器
activiti自定义流程之整合(二):使用angular js整合ueditor创建表单
<p>注:整体环境搭建:<a target="_blank" href="http://blog.csdn.net/tuzongxun/article/details/51097968">activiti自定义流程之整合(一):整体环境配置</a></p> <p><br></p> <p>基础环境搭建完毕,接下来就该正式着手代码编写了,在说代码之前,我觉得有必要先说明一下activit自
4130 0
|
JavaScript 前端开发
【曹操】 angular js双向绑定数据通过bootstrap请求获取不到表单数据
在做项目的时候,在VidyoCallFlowEntry页面中,通过name字段双击跳转弹出VidyoCallFlow页面,同时传入name的值作为参数进行查询,并展示查询结果。但在路由中获取到name的值,通过angular js双向绑定的方式赋值给VidyoCallFlow页面的vidyoname的值,发现并没有查询到结果,但是根据该name的值在数据库中查询,是有结果的。
1482 0
|
7天前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
14 0
|
7天前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
34 2
|
7天前
Angular 应用里异步打开对话框的技术实现
Angular 应用里异步打开对话框的技术实现
24 0
|
6天前
|
JavaScript 前端开发 架构师
Angular进阶:理解RxJS在Angular应用中的高效运用
RxJS(Reactive Extensions for JavaScript)是JavaScript的一个响应式编程库,特别适用于处理异步数据流。
12 0
|
7天前
|
JavaScript 前端开发
Angular.js 应用中数据模式的删除操作实现
Angular.js 应用中数据模式的删除操作实现
16 0
|
7天前
|
存储 JavaScript 前端开发
Angular 应用 node_modules 子文件夹 @types 的作用介绍
Angular 应用 node_modules 子文件夹 @types 的作用介绍
18 1
|
1天前
|
前端开发 JavaScript 测试技术
使用Angular构建高效单页应用的实践指南
【5月更文挑战第21天】本文是使用Angular构建高效单页应用的实践指南,涵盖了Angular框架简介、SPA构建步骤和最佳实践。首先,Angular是基于TypeScript的前端框架,提供声明式模板、组件化和路由管理等功能。构建SPA包括环境搭建、创建组件、编写路由、数据绑定和交互,以及构建和部署。实践中,应遵循Angular风格指南,使用Angular Material UI库,实现服务端渲染,并进行性能优化和测试,以提升应用性能和用户体验。