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

完善动态表单组件

• 添加正则验证

• 添加错误提示

添加正则验证

先来设置一些错误提示，以及添加正则验证（上一章可能遗留了部分路径错误，可以自行调整）
user-add.service.ts

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

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

import { regExp } from './../../../api/universal/regExp';

@Injectable()
export class UserAddService {
  getQuestions() {
    let questions: QuestionBase<any>[] = [
      new InputQuestion({
        key: "firstName",
        label: "First name",
        value: "Bombasto",
        required: true,
        order: 1
      }),

      new InputQuestion({
        key: "emailAddress",
        label: "Email",
        type: "email",
        required: true,
        reg: regExp.email,
        prompt: "邮箱格式不正确",
        order: 2
      }),

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

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

pages/api/universal/regExp.ts 这里是提供的一些正则

export const regExp = {
  number: /^\d{1,6}$/,

  tel: /^(\+86)?(\s)?(\d{1,4}-)?\d{5,11}$/,

  phone: /^1[34578]\d{9}$/,

  email: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/,

  text: /^[a-zA-Z\u4e00-\u9fa5]{2,9}/,

  name: /^[a-zA-Z\u4e00-\u9fa5]{2,9}/,

  file: /[2-9]{1,2}/,

  password: /^(?=.*?[A-Za-z]+)(?=.*?[0-9]+)(?=.*?[A-Za-z]).{6,16}$/,

  strongPassword: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{6,16}$/,  //要求大小写字母数字特殊符号四选三

  approvalStatus: /(2|3)/,
};

添加错误提示

在验证无法通过时，用户不清楚自己未通过验证的选项，所以现在需要加入错误提示，友好的提示用户。

• 添加一些样式

在 dynamic-form.component.ts 添加

import "style-loader!./dynamic-fom-components.component.scss";

dynamic-fom-components.component.scss

$errorColor: #fa758e;

.form-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  label {
    width: 10%;
    margin-right: 20px;
    i {
      color: $errorColor;
      margin-right: 5px;
    }
  }
  .form-control {
    width: 25%;
  }
  .prompt-error {
    color: $errorColor;
    margin-left: 20px;
  }
}

• 添加默认的错误提示

question-base.ts

this.prompt = options.prompt || '该项为必填/选项';

• 添加错误提示

我们使用的是响应式表单组成的动态表单，所以对应的 FormControl 应该有以下几个属性可以帮助我们添加提示

• valid 是否验证通过
• touched 是否操作过
• value 控件的值

现在来为控件添加提示样式

先为 QuestionControlService 添加一个公开的方法，用于设置 setter

question-control.service.ts

...
export class QuestionControlService {
    ...
    public getControlProperty(): void {
      Object.defineProperty(this, 'isValid', {
        get() {
          return this.form.controls[this.question.key].valid;
        }
      });

      Object.defineProperty(this, 'isTouched', {
        get() {
          return this.form.controls[this.question.key].touched;
        }
      });
    }
}

这里是将用户表单中 FormControl 的 valid 和 touched 属性设置为 getter, 以便实时更新状态。

现在来为 InputTextboxComponent 注入这几个 getter

input-textbox.component.ts

export class InputTextboxComponent {
  ...
  constructor(private qcs: QuestionControlService) {
    qcs.getControlProperty.call(this, null);
  }
}

然后需要在 html 中添加一些规则， 来显示这些错误提示

input-textbox.component.html

<div class="form-container" [formGroup]="form" [ngClass]="{'has-error':!isValid && isTouched,
'has-success': isValid && isTouched}">
  <label for=""><i>*</i>{{question.label}}</label>
  <input class="form-control" [formControlName]="question.key" [id]="question.key" [type]="question.type">
  <span *ngIf="!isValid && !!isTouched" class="prompt-error">{{question.prompt}}</span>
</div>

这样就大功告成，以下是实际效果图

当验证不通过时：

mark

错误提示出现，输入框有红色线框环绕，且提交按钮为置灰状态

当验证通过时：

mark

所有选项有正确提示，且表单可提交

读者可自行完成 InputSelectComponent 的错误提示验证

下章将会讲解如何提交一个表单，基本的增删改查，将会使用到 httpClient.

（此章以及此章前，代码都提交在 ng2-admin 的 development 分支上，在未来会分开分支，方便读者练习）