使用ng2-admin搭建成熟可靠的後臺系統 -- ng2-admin（三）

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