work hard work smart

专注于Java后端开发。 不断总结,举一反三。
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8

Angular 4 表单

Posted on   work hard work smart  阅读(470)  评论(0编辑  收藏  举报

一. 模板表单

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简化

 

编辑推荐:
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· 程序员常用高效实用工具推荐,办公效率提升利器!
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)
历史上的今天:
2011-08-11 WPF 样式
2011-08-11 wpf 控件旋转
点击右上角即可分享
微信分享提示