使用ng2-admin搭建成熟可靠的后臺系統(tǒng) -- ng2-admin（四）

HtmlCssJs 發(fā)布于2019-08-21 18:35 / 2132人閱讀

摘要：使用搭建成熟可靠的后臺系統(tǒng)四完善動態(tài)表單組件添加正則驗證添加錯誤提示添加正則驗證先來設(shè)置一些錯誤提示，以及添加正則驗證上一章可能遺留了部分路徑錯誤，可以自行調(diào)整郵箱格式不正確請選擇這里是提供的一些正則

使用ng2-admin搭建成熟可靠的后臺系統(tǒng) -- ng2-admin（四） 完善動態(tài)表單組件

添加正則驗證

添加錯誤提示

添加正則驗證

先來設(shè)置一些錯誤提示，以及添加正則驗證（上一章可能遺留了部分路徑錯誤，可以自行調(diào)整）
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}$/,  //要求大小寫字母數(shù)字特殊符號四選三

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

添加錯誤提示

在驗證無法通過時，用戶不清楚自己未通過驗證的選項，所以現(xiàn)在需要加入錯誤提示，友好的提示用戶。

添加一些樣式

在 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;
  }
}

添加默認(rèn)的錯誤提示

question-base.ts

this.prompt = options.prompt || "該項為必填/選項";

添加錯誤提示

我們使用的是響應(yīng)式表單組成的動態(tài)表單，所以對應(yīng)的 FormControl 應(yīng)該有以下幾個屬性可以幫助我們添加提示

valid 是否驗證通過

touched 是否操作過

value 控件的值

現(xiàn)在來為控件添加提示樣式

先為 QuestionControlService 添加一個公開的方法，用于設(shè)置 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 屬性設(shè)置為 getter, 以便實時更新狀態(tài)。

現(xiàn)在來為 InputTextboxComponent 注入這幾個 getter

input-textbox.component.ts

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

然后需要在 html 中添加一些規(guī)則，來顯示這些錯誤提示

input-textbox.component.html


  *{{question.label}}
  
  {{question.prompt}}

這樣就大功告成，以下是實際效果圖

當(dāng)驗證不通過時：

錯誤提示出現(xiàn)，輸入框有紅色線框環(huán)繞，且提交按鈕為置灰狀態(tài)

當(dāng)驗證通過時：

所有選項有正確提示，且表單可提交

讀者可自行完成 InputSelectComponent 的錯誤提示驗證

下章將會講解如何提交一個表單，基本的增刪改查，將會使用到 httpClient.

（此章以及此章前，代碼都提交在 ng2-admin 的 development 分支上，在未來會分開分支，方便讀者練習(xí)）

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/90608.html

發(fā)表評論

登陸后可評論

0條評論

HtmlCssJs

男|高級講師

我要關(guān)注我要私信

TA的文章

LeetCode 397 整數(shù)替換[遞歸] HERODING的LeetCode之路

閱讀 3303·2021-11-19 09:40
#11.11#HostDare：洛杉磯CN2線路VPS低至6.5折，年付$39.99起

閱讀 3723·2021-11-16 11:52
學(xué)Python說簡單真的簡單，說難也難，就由過來人給你總結(jié)為什么吧。

閱讀 3061·2021-11-11 16:55
html+css面試題行內(nèi)元素padding和margin

閱讀 3269·2019-08-30 15:55
Day05-flexible.js

閱讀 1267·2019-08-30 13:08
前端每日實戰(zhàn)：161# 視頻演示如何用純 CSS 創(chuàng)作一張紀(jì)念卓別林的卡片

閱讀 1740·2019-08-29 17:03
《CSS世界》筆記三：內(nèi)聯(lián)元素與對齊

閱讀 3110·2019-08-29 16:19
循環(huán)的幾種類型

閱讀 2669·2019-08-29 13:43

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

使用ng2-admin搭建成熟可靠的后臺系統(tǒng) -- ng2-admin（四）

相關(guān)文章

**使用ng2-admin搭建成熟可靠的后臺系統(tǒng) -- ng2-admin（三）**

**使用ng2-admin搭建成熟可靠的后臺系統(tǒng) -- ng2-admin（二）**

**使用ng2-admin搭建成熟可靠的后臺系統(tǒng) -- ng2-admin（六）**

**使用ng2-admin搭建成熟可靠的后臺系統(tǒng) -- ng2-admin（五）**

手游開發(fā)如何選擇后端服務(wù)

發(fā)表評論

0條評論

HtmlCssJs

男|高級講師

TA的文章

LeetCode 397 整數(shù)替換[遞歸] HERODING的LeetCode之路

#11.11#HostDare：洛杉磯CN2線路VPS低至6.5折，年付$39.99起

學(xué)Python說簡單真的簡單，說難也難，就由過來人給你總結(jié)為什么吧。

html+css面試題行內(nèi)元素padding和margin

Day05-flexible.js

前端每日實戰(zhàn)：161# 視頻演示如何用純 CSS 創(chuàng)作一張紀(jì)念卓別林的卡片

《CSS世界》筆記三：內(nèi)聯(lián)元素與對齊

循環(huán)的幾種類型

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

使用ng2-admin搭建成熟可靠的后臺系統(tǒng) -- ng2-admin（四）

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！