资讯专栏INFORMATION COLUMN

使用ng2-admin搭建成熟可靠的后台系统 -- ng2-admin(二)

FleyX / 786人阅读

摘要:使用搭建成熟可靠的后台系统二构建动态表单构建一个动态表单,动态生成控件,验证规则。现在来创建它的子组件从上面的组件可以看出,未来需要添加组件时,只需要添加一种类型,可以用决定显示哪种类型的问题。

使用ng2-admin搭建成熟可靠的后台系统 -- ng2-admin(二) 1.构建动态表单

构建一个动态表单,动态生成控件,验证规则。

创建一个input组件,一个select组件

将组件注入到页面中并显示


创建组件目录
前半部分直接借鉴官方文档的写法,后期开启个性化定制后,功能强大!

theme/components 目录下创建一个文件夹 dynamic-form

项目目录结构如下,下面跟着步骤一步一步来构建

创建对象模型

我们需要定义一个对象模型,用来描述表单功能需要的场景。相关功能非常之多(类似于 input select )。

先创建一个最基础的基类,名为 QuestionBase,文件为 dynamic-form-base/question-base.ts

export class QuestionBase{
    value: T; // 值,类型可选
    key: string; // 字段名
    label: string; // 控件前的文字提示
    required: boolean; // 是否为必填
    disabled: boolean; // 是否禁用
    reg: string; // 正则
    prompt: string; // 验证不通过提示
    order: number; // 排序
    controlType: string; // 渲染类型
    constructor(options: {
        value?: T,
        key?: string,
        label?: string,
        required?: boolean,
        disabled?: boolean,
        reg?: string,
        prompt?: string,
        order?: number,
        controlType?: string
    } = {}) {
        // 设置各个值的默认值
        this.value = options.value;
        this.key = options.key || "";
        this.label = options.label || "";
        this.required = !!options.required;
        this.disabled = !!options.disabled;
        this.reg = options.reg || "";
        this.prompt = options.prompt || "";
        this.order = options.order || 0;
        this.controlType = options.controlType || "";
    }
}

在这个基础上,我们派生出两个类 InputQuestionSelectQuestion ,代表文本框和下拉框。

这么做的原因是根据不同的控件,进行个性化定制,以及合理规范,还有动态渲染出合适的组件

InputQuestion 可以通过type属性来支持多种HTML元素类型(例如: text number email) --- dynamic-form-base/question-input.ts

import { QuestionBase } from "./question-base";

export class InputQuestion extends QuestionBase {
    controlType = "input";
    type: string;

    constructor(options: {} = {}) {
        super(options);
        this.type = options["type"] || "";
    }
}

SelectQuestion 表示一个带可选列表的选择框

import { QuestionBase } from "./question-base";

export class SelectQuestion extends QuestionBase {
    controlType = "select";
    options: any[] = [];

    constructor(options: {} = {}) {
        super(options);
        this.options = options["options"] || [];
    }
}

最后别忘了用 index.ts 将这三个模型导出

接下来,我们定义一个 QuestionControlService,一个可以把模型转换为FormGroup的服务。 简而言之,这个FormGroup使用问卷模型的元数据,并允许我们设置默认值和验证规则

question-control.service.ts

import { Injectable } from "@angular/core";
import { FormControl, FormGroup, Validators } from "@angular/forms";

import { QuestionBase } from "./dynamic-form-base";

@Injectable()
export class QuestionControlService {
    constructor() { }

    // 转化为控件
    toFormGroup(questions: QuestionBase[]) {
        let group: any = {};

        questions.forEach(question => {
            if (question.required) {    // 选项为必填时
                if (question.reg) {       // 有正则的情况
                    group[question.key] = new FormControl(question.value || "", Validators.compose([Validators.required, Validators.pattern(question.reg)]));
                } else {
                    group[question.key] = new FormControl(question.value || "", Validators.compose([Validators.required]));
                }
            } else if (!question.required && question.reg) {     // 选项为非必填但是需要正则匹配的情况
                group[question.key] = new FormControl(question.value || "", Validators.compose([Validators.pattern(question.reg)]));
            } else {
                group[question.key] = new FormControl(question.value || "");
            }
        });
        return new FormGroup(group);
    }
}
动态表单组件

现在我们已经有了一个定义好的完整模型了,接着就可以开始构建一个展现动态表单的组件。

DynamicFormComponent 是表单的主要容器和入口

dynamic-form.component.html

Saved the following values
{{payload}}

dynamic-form.component.ts

import { Component, Input, OnInit } from "@angular/core";
import { FormGroup } from "@angular/forms";

import { QuestionBase } from "./dynamic-form-base/question-base";
import { QuestionControlService } from "./question-control.service";

@Component({
  selector: "dynamic-form",
  templateUrl: "./dynamic-form.component.html",
  providers: [QuestionControlService]
})

export class DynamicFormComponent implements OnInit {
  @Input() questions: QuestionBase[] = [];
  form: FormGroup;
  payload = "";

  constructor(
    private qcs: QuestionControlService
  ) { }

  ngOnInit() {
    console.log(this.questions);
    this.form = this.qcs.toFormGroup(this.questions);
    console.log(this.form);
  }

  onSubmit() {
    this.payload = JSON.stringify(this.form.value);
  }
}

刚才创建的是一个组件入口,每个 question 都被绑定到了 组件元素, 标签匹配到的是组件 DynamicFormQuestionComponent,该组件的职责是根据各个问卷问题对象的值来动态渲染表单控件。

现在来创建它的子组件 DynamicFormQuestionComponent

dynamic-form-question/dynamic-form-question.component.html

dynamic-form-question/dynamic-form-question.component.ts

import { Component, Input } from "@angular/core";
import { FormGroup } from "@angular/forms";

import { QuestionBase } from "../dynamic-form-base/question-base";

@Component({
  selector: "df-question",
  templateUrl: "./dynamic-form-question.component.html"
})

export class DynamicFormQuestionComponent {
  @Input() question: QuestionBase;
  @Input() form: FormGroup;

  get isValid() { return this.form.controls[this.question.key].valid }
}

从上面的组件可以看出,未来需要添加组件时,只需要添加一种类型,可以用 ngSwitch 决定显示哪种类型的问题。

在这两个组件中,我们依赖Angular的formGroup来把模板HTML和底层控件对象连接起来,该对象从问卷问题模型里获取渲染和验证规则。

注意:每个目录都需要用 index.ts 导出模块, 这里需要在 theme/components 将我们注册的组件统一导出。
注册组件

我们创建组件之后,需要将我们的组件注册到 module 中,这里选择 theme/nga.module.ts 注入我们的组件。

其实使用组件还需要注入 ReactiveFormsModule, ng2-admin 已经帮我们注册好了,所以我们这里只需要注册我们创建的组件即可

方法如下图,先引入

然后添加至 NGA_COMPONENTS

注册Service

DynamicForm 期望得到一个问题列表,该列表被绑定到@Input() questions属性。

QuestionService 会返回为工作申请表定义的那组问题列表。在真实的应用程序环境中,我们会从数据库里获得这些问题列表。

要维护控件,只要非常简单的添加、更新和删除 questions 数组中的对象就可以了。

切换到 pages 文件夹,开始使用我们上一章创建的 UserAddComponent

pages/user/user-list/user-add/user-add.service.ts

import { Injectable } from "@angular/core";

import {
  QuestionBase,
  InputQuestion,
  SelectQuestion
} from "../../../../theme/components/dynamic-form/dynamic-form-base";

@Injectable()
export class UserAddService {
  getQuestions() {
    let questions: QuestionBase[] = [

      new SelectQuestion({
        key: "brave",
        label: "Bravery Rating",
        value: "solid",
        options: [
          { key: "Solid", value: "solid" },
          { key: "Great", value: "great" },
          { key: "Good", value: "good" },
          { key: "Unproven", value: "unproven" }
        ],
        order: 3
      }),

      new InputQuestion({
        key: "firstName",
        label: "First name",
        value: "Bombasto",
        required: true,
        order: 1
      }),

      new InputQuestion({
        key: "emailAddress",
        label: "Email",
        type: "email",
        order: 2
      })
    ];

    return questions.sort((a, b) => a.order - b.order);
  }
}

需要在 html 文件以及 component 文件中显示,所以修改一下这两个文件

user-add.component.html

新增用户组件

user-add.component.ts

import { Component } from "@angular/core";

import { UserAddService } from "./user-add.service";
import { QuestionBase } from "../../../../theme/components/dynamic-form/dynamic-form-base/question-base";

@Component({
  selector: "ngt-user-add",
  templateUrl: "./user-add.component.html",
  providers: [UserAddService]
})

export class UserAddComponent {
  public UserAddQuestions: QuestionBase[] = [];
  
  constructor(
    private service: UserAddService
  ) {
    this.UserAddQuestions = this.service.getQuestions();
  }
}

根据 Angular 的模块查找规则,所以这里还需要把 NgaModule 注入到 user.module.ts中,如下图

然后打开浏览器,输入 http://localhost:4200/#/pages/user/list/add

访问效果如下图,填入一些数据,然后点击保存,我们需要存入的数据,显示在了下方

动态表单的雏形已经做出来了,现在还有几个问题

样式需要优化

数据如何过滤优化

数据如何提交

组件功能有些薄弱

这些问题我们会在后续的章节慢慢解决,可以期待。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88739.html

相关文章

  • 使用ng2-admin搭建成熟可靠后台系统 -- ng2-admin(三)

    摘要:使用搭建成熟可靠的后台系统三完善动态表单添加样式。下一章会讲解,一个集成的服务,来完成我们的提交,在将来的篇章里会在我们的组件中加入使其变得更加灵活。 使用ng2-admin搭建成熟可靠的后台系统 -- ng2-admin(三) 完善动态表单 添加样式。 抽离组件。 添加组件样式 上一篇文章创建了两个,组件,现在使用bootstrap来给他们添加一些样式 首先需要一个公用的 s...

    张宪坤 评论0 收藏0
  • 使用ng2-admin搭建成熟可靠后台系统 -- ng2-admin(四)

    摘要:使用搭建成熟可靠的后台系统四完善动态表单组件添加正则验证添加错误提示添加正则验证先来设置一些错误提示,以及添加正则验证上一章可能遗留了部分路径错误,可以自行调整邮箱格式不正确请选择这里是提供的一些正则 使用ng2-admin搭建成熟可靠的后台系统 -- ng2-admin(四) 完善动态表单组件 添加正则验证 添加错误提示 添加正则验证 先来设置一些错误提示,以及添加正则验证(...

    HtmlCssJs 评论0 收藏0
  • 使用ng2-admin搭建成熟可靠后台系统 -- ng2-admin(六)

    摘要:注意在配置完成后,需要重新启动项目使配置生效。每一行的内容,由数据内容决定,例如有三条数据,应显示三行数据,数据由组件自身请求获取,所以应该有一个自身的属性用于承载数据。注意这里将换成了,所以组件的也需要替换,否则会报错。 使用ng2-admin搭建成熟可靠的后台系统 -- ng2-admin(六) 完善动态表单组件 先来张本章节最终效果图showImg(https://segmen...

    bingo 评论0 收藏0
  • 使用ng2-admin搭建成熟可靠后台系统 -- ng2-admin(五)

    摘要:创建一个工具类,负责提供以及完成拼接参数的工作。根据我们的配置,来创建这个文件。因为是表单提交,所以我们新建一个服务,由它来完成表单提交的最后一步。 使用ng2-admin搭建成熟可靠的后台系统 -- ng2-admin(五) 完善动态表单组件 升级Angular 4.1 -> 4.3 添加 json-server 模拟数据 创建自己的 http 完成一次表单提交 升级Angu...

    MiracleWong 评论0 收藏0
  • 手游开发如何选择后端服务

    摘要:云函数是万金油为实现用户游戏数据存储和每日任务分发,我们最先用了存储服务和云引擎。不过我们并没有用提供的来直接调用存储服务,而是选择用调用云引擎里面的云函数,然后通过云函数调用存储服务来实现相应的逻辑。 【 玩转 LeanCloud 】开发者投稿分享: 作者:赵天泽 作为一个通过 LeanCloud 入门后端开发的小白,一年多的开发历程让我收获满满。多个项目也在 LeanCloud 可...

    codecook 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<