使用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>

最终效果如下，效果比之前好很多，后续我们会继续优化样式。

mark

抽离组件

抽离组件的意思是，把 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>

最终效果

mark

看起来没有太大变化，实际上我们完成了组件的抽离，在未来的日子里，组件库会慢慢越来越多，创建更多高耦合性的组件，利用功能组件来组成业务组件，减少文件大小，将会是一个大工程。

下一章会讲解，一个集成的 service 服务，来完成我们的 form 提交，在将来的篇章里会在我们的 form 组件中加入 redux, subject 使其变得更加灵活。