前言
- 表单在项目中的地位不言而喻，复杂的表单写起来费时费力，要考虑的情况非常多，如表单验证，处理各种输入类型（日期，单元，多选），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属性或者requiredclass，给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/
- 实际开发中需要对表单信息进行分类，提升用户体验，如必填的放上面，非必填的放下面
