分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了使用ng2-admin搭建成熟可靠的后台系统 -- ng2-admin（二），大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

使用Ng2-admin搭建成熟可靠的后台系统 -- ng2-admin（二）

1.构建动态表单

创建组件目录

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

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

创建对象模型

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

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

export class QuestionBase<T>{
    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 || '';
    }
}

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

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

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

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

export class InputQuestion extends QuestionBase<String | number> {
    controlType = 'input';
    type: String;

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

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

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

export class SELEctQuestion extends QuestionBase<String | number> {
    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<any>[]) {
        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

<div>
  <form (ngSubmit)="onSubmit()" [formGroup]="form">
    <div *ngFor="let question of questions" class="form-row">
      <df-question [question]="question" [form]="form"></df-question>
    </div>

    <div class="form-row">
      <button type="submit" [disabled]="!form.valid">保存</button>
    </div>
  </form>

  <div *ngIf="payload" class="form-row">
    <strong>Saved the following values</strong><br>{{payloaD}}
  </div>
</div>

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<any>[] = [];
  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 都被绑定到了 <df-question>组件元素，<df-question> 标签匹配到的是组件 DynamicFormQuestionComponent，该组件的职责是根据各个问卷问题对象的值来动态渲染表单控件。

现在来创建它的子组件 DynamicFormQuestionComponent

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

<div [formGroup]="form">
    <div [ngSwitch]="question.controlType">
        <input *ngSwitchCase="'input'" [formControlName]="question.key" [id]="question.key" [type]="question.type">

        <SELEct [id]="question.key" *ngSwitchCase="'SELEct'" [formControlName]="question.key">
            <option *ngFor="let opt of question.options" [value]="opt.value">{{opt.key}}</option>
          </SELEct>
    </div>
</div>

dynamic-form-question/dynamic-form.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<any>;
  @input() form: FormGroup;

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

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

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

注册组件

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

方法如下图，先引入

然后添加至 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<any>[] = [

      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

<h1>
    新增用户组件
</h1>
<div class="user-form">
  <dynamic-form [questions]="UserAddQuestions"></dynamic-form>
</div>

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<any>[] = [];
  
  constructor(
    private service: UserAddservice
  ) {
    thiS.UserAddQuestions = this.service.getQuestions();
  }
}

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

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

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

样式需要优化
数据如何过滤优化
数据如何提交
组件功能有些薄弱

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

github地址（分支 dynamic-form）可以直接拉代码下来启动项目查看

大佬总结

以上是大佬教程为你收集整理的使用ng2-admin搭建成熟可靠的后台系统 -- ng2-admin（二）全部内容，希望文章能够帮你解决使用ng2-admin搭建成熟可靠的后台系统 -- ng2-admin（二）所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：admin 二使用可靠后台成熟搭建系统

上一篇: typescript – 如何从angular2的... 下一篇:【Angular2】新建Angular2项目

猜你在找的Angularjs相关文章

Angularjs基础(八) 2022-04-20
angularjs – 在IE9中使用Angular 2需要什么？ 2019-10-10
angularjs – $http从服务到控制器的POST响应 2019-10-10
如何使用Typescript在Angular 2中创建TreeView？ 2019-10-10
angularjs – 尝试基于常量在控制器中动态设置templateUrl 2019-10-10
angular – 在app.component.ts中导入HTTP_PROVIDERS 2019-10-10
如何使用Observable初始化Reactive Angular2表单？ 2019-10-10
angular – 使用ng2-smart-table编辑和创建 2019-10-10
angularjs – 角度组件绑定未定义 2019-10-10
angularjs – 在ui.router中只更改状态更改的一个视图？ 2019-10-10

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