使用ng2-admin搭建成熟可靠的后台系统 -- ng2-admin（三）
完善动态表单
添加样式。
抽离组件。
添加组件样式
上一篇文章创建了两个，组件，现在使用bootstrap来给他们添加一些样式
首先需要一个公用的 scss ， 然后是各个组件自身的样式
ctrl + p 打开 dynamic-form.component.ts 文件（打开文件方式不再复述）
在 @Component 装饰器处，添加 scss (ng2-madin 自带 bootstrap 样式库，所以不需要引入)
@Component({
selector: 'dynamic-form',
templateUrl: './dynamic-form.component.html',
styleUrls: ['./dynamic-form.component.scss'],
providers: [QuestionControlService]
})
随后创建 dynamic-form.component.scss 文件
form {
.form-group {
margin: 20px 0;
}
}
同时还需要修改几个文件
dynamic-form.component.html 保存按钮添加一个 class
<button type="submit" [disabled]="!form.valid" class="btn btn-success">保存</button>
dynamic-form-question.html
<div [formGroup]="form" class="form-group">
<div [ngSwitch]="question.controlType">
<input class="form-control" *ngSwitchCase="'input'" [formControlName]="question.key" [id]="question.key" [type]="question.type">
<select class="form-control" [id]="question.key" *ngSwitchCase="'select'" [formControlName]="question.key">
<option *ngFor="let opt of question.options" [value]="opt.value">{{opt.key}}</option>
</select>
</div>
</div>
最终效果如下，效果比之前好很多，后续我们会继续优化样式。
抽离组件
抽离组件的意思是，把
form组件用到的所有组件都抽离出来作为一个单独的组件库，可以有业务组件，也可以有完全解耦的功能组件，可以在多平台的时候发挥巨大的优势，后期也可以作为自己的一个组件库开源！
在 theme/components 下创建一个目录 dynamic-form-components
直接把 dymamic-form 目录下的 dynamic-form-base 目录迁移过去，记得把之前引入的文件路径修改一下，否则会报错
然后在新建的组件目录下，新建文件夹 dynamic-form-questions，用于装载我们即将创建的组件, 然后继续创建 dynamic-form-questions/input-textbox 目录
input-texbox.component.ts
import { Component, Input } from "@angular/core";
import { FormGroup } from '@angular/forms';
import { InputQuestion } from "../../dynamic-form-base/question-input";
@Component({
selector: "input-textbox",
templateUrl: "./input-textbox.component.html",
styleUrls: ["./input-textbox.component.scss"]
})
export class InputTextboxComponent {
@Input() question: InputQuestion;
@Input() form: FormGroup;
constructor() {}
}
input-texbox.component.html
<div class="form-container" [formGroup]="form">
<label for="">{{question.label}}</label>
<input class="form-control" [formControlName]="question.key" [id]="question.key" [type]="question.type">
</div>
index.ts 该文件不再声明，读者自行根据引入路径添加即可
export * from './input-textbox.component';
这样我们的组件就有了单独的目录管理，涉及到多平台时，可以把组件单独引入
同理读者尝试创建 InputSelectComponent
在 nga.module.ts 中注册这两个组件后，修改文件
dynamic-form-question.component.html
<div [formGroup]="form" class="form-group">
<div [ngSwitch]="question.controlType">
<ng-container *ngSwitchCase="'input'">
<input-textbox [question]="question" [form]="form"></input-textbox>
</ng-container>
<ng-container *ngSwitchCase="'select'">
<input-select [question]="question" [form]="form"></input-select>
</ng-container>
</div>
</div>
最终效果
看起来没有太大变化，实际上我们完成了组件的抽离，在未来的日子里，组件库会慢慢越来越多，创建更多高耦合性的组件，利用功能组件来组成业务组件，减少文件大小，将会是一个大工程。
下一章会讲解，一个集成的 service 服务，来完成我们的 form 提交，在将来的篇章里会在我们的 form 组件中加入 redux, subject 使其变得更加灵活。
