前言

• 表单在项目中的地位不言而喻，复杂的表单写起来费时费力，要考虑的情况非常多，如表单验证，处理各种输入类型（日期，单元，多选），ui风格，
• 每个人的审美不同，加上每个人对ui框架熟悉程度不同，写出来的代码千差万别，很难维护；在ui框架默认的样式上再自定义样式，写起来也很痛苦
• 本文将使用ionic ui组件默认样式，尽可能的少自定义样式，实现一个表单demo，尽可能多考虑表单各种常见输入类型、输入场景，以便让开发表单的同事们参考，统一风格，提升开发效率

源码地址

https://github.com/yanxiaojun617/ionic2_tabs/blob/master/src/pages/demo/form-demo/form-demo.html

在线预览

https://yanxiaojun617.com/ionic2_tabs/

效果

• 效果图 .png
  
• 效果图.gif
  

简单说明

• angular针对表单处理数据提供了两种模式，响应式表单和模板驱动表单，简单理解响应式表单就是使用FormControl绑定输入，模板驱动表单使用ngModel绑定输入；响应式表单更利于测试，模板驱动表单更简单，直观，更多详细差异和使用说明请参考官网文档。我这里使用模板驱动表单

• 表单验证，基于html5的表单验证规则
  

• 必填项，给label添加required属性或者required class，给input也要添加requiredhtml5必填验证
  

• 单选，有3种风格，自行选择

1

2

3

• 多选，有2种风格，自行选择

• label太长，添加too-longclass自动换行
  
  
  
  
  

• 多行输入， 使用div模拟textarea从而实现根据内容多少自动改变文本域高

参考 https://github.com/KostyaTretyak/ng-contenteditable

在angular4上安装npm install ng-contenteditable --save会警告，需要依赖angular6以上；使用--prod打包报错

于是根据他的源代码自定义contenteditable指令解决问题

其他

• 源码：https://github.com/yanxiaojun617/ionic2_tabs/blob/master/src/pages/demo/form-demo/form-demo.html
• 在线预览：https://yanxiaojun617.com/ionic2_tabs/
• 实际开发中需要对表单信息进行分类，提升用户体验，如必填的放上面，非必填的放下面