资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/使用ng2-admin搭建成熟可靠的后台系统 -- ng2-admin（四）

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

HtmlCssJs / 1921人阅读

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

使用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[] = [
      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-Zu4e00-u9fa5]{2,9}/,

  name: /^[a-zA-Zu4e00-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-ZW_]+$)(?![a-z0-9]+$)(?![a-zW_]+$)(?![0-9W_]+$)[a-zA-Z0-9W_]{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


  
  
  {{question.prompt}}

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

当验证不通过时：

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

当验证通过时：

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

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

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

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

混合云 云服务器 php成熟系统 网站后台的短信接口使用啥 成熟的webrtc开源 开源成熟的Webrtc

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

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

相关文章

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

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

    张宪坤 评论0 收藏0

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

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

    FleyX 评论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条评论

HtmlCssJs

男|高级讲师
我要私信

TA的文章

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