发表于: 2017-06-02 21:09:27
3 1225
2017-06-02 Day073
今天完成的事情
路由下面写了几个表单,在同一个组件中设置了两个子组件,满足输入搜索信息输入,和搜索结果展示页面。
明天计划的事情
这几天写的东西都没有写样式,明天补一下样式,看看怎么引入样式组件。
遇到的问题
- 1. 搜索信息每个版块下面显示的都不一样,开始设想的是根据路由来判断是哪个组件,将表单的信息全部写在一张表中,
export let searchFromData = {navbar11: [{header: '公司名称', type: 'text', label: 'company',name: 'company'},]};
根据表的信息,动态生成表单。但是想了半天,没有解决动态生成的时候判断生成的是<input>
还是<select>
,暂时先写一个表单组件吧,等想到怎么实现的时候再来重构。
最后只是写了个<select>
的选项动态生成
<!--html--><label for="years">工作经验</label><select name="years" id="years" ngModel><option *ngFor="let option of selectData.statueOne">{{option.display}}</option></select>
//数据export let selectData = {statueOne: [{value: 'AStatue', display: 'A轮'},{value: 'BStatue', display: 'B轮'},{value: 'CStatue', display: 'C轮'},{value: 'DStatue', display: 'D轮'},],...};
- 2. 使用了
ngForm
接管了表单,ngSubmit
结果表单的提交之后,表单的两个button
的功能竟然全部变成了ngSubmit
绑定的方法,清除的方法无效了,不知道怎么解决这个问题?
<!--html--><form #searchFrom="ngForm" (ngSubmit)="goSearch(searchFrom.value)"><button (click)="clearInput()">清除</button><button>搜索</button></form>//点击清除和点击搜索调用的是goSearch()方法
收获
当表单对数据验证要求不高的时候可以使用模板表单,这样实现验证的代码量少,写起来方便。
评论