使用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 使其變得更加靈活。
