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