今天完成的事情

路由下面写了几个表单，在同一个组件中设置了两个子组件，满足输入搜索信息输入，和搜索结果展示页面。

明天计划的事情

这几天写的东西都没有写样式，明天补一下样式，看看怎么引入样式组件。

遇到的问题

1. 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. 2. 使用了ngForm接管了表单，ngSubmit结果表单的提交之后，表单的两个button的功能竟然全部变成了ngSubmit绑定的方法，清除的方法无效了，不知道怎么解决这个问题？

<!--html-->
 <form #searchFrom="ngForm" (ngSubmit)="goSearch(searchFrom.value)">
    <button (click)="clearInput()">清除</button>
    <button>搜索</button>
 </form>
 //点击清除和点击搜索调用的是goSearch()方法

收获

当表单对数据验证要求不高的时候可以使用模板表单，这样实现验证的代码量少，写起来方便。