AI 助理
备案控制台
开发者社区 云计算 文章 正文

Angular 4 表单

2017-08-18 997
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

一. 模板表单

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，如需转载请自行联系原作者

关键词：
Angular表单
zting科技
目录
相关文章
土木林森
|
2月前
|
开发者 Java Spring
JSF 牵手社交登录，如魔法风暴席卷 Web 世界，开启震撼便捷登录之旅！
【8月更文挑战第31天】在互联网时代，便捷登录成为用户的核心需求。社交登录凭借其便捷性、安全性和社交化的特点，在各类Web应用中广泛应用。JavaServer Faces（JSF），作为一款流行的Java Web框架，能够轻松集成社交登录功能，显著提升用户体验。本文详细介绍社交登录的优势，并提供两种JSF集成社交登录的常见方法：一是利用Spring Social等第三方库简化开发；二是自行实现社交登录流程。开发者可根据项目需求选择适合的方案。
土木林森
31 0
土木林森
|
2月前
|
开发者 容器 Docker
JSF与Docker，引领容器化浪潮！让你的Web应用如虎添翼，轻松应对高并发！
【8月更文挑战第31天】在现代Web应用开发中，JSF框架因其实用性和灵活性被广泛应用。随着云计算及微服务架构的兴起，容器化技术变得日益重要，Docker作为该领域的佼佼者，为JSF应用提供了便捷的部署和管理方案。本文通过基础概念讲解及示例代码展示了如何利用Docker容器化JSF应用，帮助开发者实现高效、便携的应用部署。同时也提醒开发者注意JSF与Docker结合使用时可能遇到的限制，并根据实际情况做出合理选择。
土木林森
30 0
白如意i
|
2月前
Angular 中的响应式表单：监听变化
Angular 中的响应式表单：监听变化
白如意i
27 0
白如意i
|
2月前
|
JavaScript 前端开发
如何在 Angular 中使用响应式表单
如何在 Angular 中使用响应式表单
白如意i
17 0
白如意i
|
2月前
|
JavaScript 前端开发
如何在 Angular 中为响应式表单创建自定义验证器
如何在 Angular 中为响应式表单创建自定义验证器
白如意i
16 0
白如意i
|
2月前
|
JavaScript
如何使用 ControlValueAccessor 在 Angular 中创建自定义表单控件
如何使用 ControlValueAccessor 在 Angular 中创建自定义表单控件
白如意i
13 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自
涂宗勋
4153 0
crperx
|
API
Angular 2.x折腾记 ：(7) 初步了解表单：模板驱动及数据驱动及脱坑要点
表单在整个系统中的作用相当重要，这里主要扯下响应表单的实现方式。 首先需要操作表单的模块引入这两个模块； import { FormsModule, ReactiveFormsModule } from '@angular/forms';
crperx
166 0
luckyharry4
|
JSON 数据安全/隐私保护 数据格式
Angular4总结（六）—— 表单
模版式表单（FormsModule） 这个方法只适用于简单的表单需求，因为它受限于html模版。 可以使用的指令为： NgForm. ———> 隐式创建FormGroup实例 NgModel. ———>隐式创建FormControl实例 NgModelGroup. ————>隐式创建FormGroup实例，与NgForm类似，只不过NgModelGroup相当于在外面又加了一层外壳，然后这个外壳，作为了NgForm的子属性 NgForm相当于传统的页面form表单，表单中所有定义的属性，需要写上NgModel，这样NgForm就知道所有NgModel的存在了。
luckyharry4
1385 0
我是小助手
|
前端开发 JavaScript 开发者
掌握 Angular2 的表单 - Angular2 系列 (4)
我是小助手
819 0