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

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

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

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

添加正則驗(yàn)證
添加錯(cuò)誤提示

添加正則驗(yàn)證

先來(lái)設(shè)置一些錯(cuò)誤提示，以及添加正則驗(yàn)證（上一章可能遺留了部分路徑錯(cuò)誤，可以自行調(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: "請(qǐng)選擇", 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}$/,  //要求大小寫(xiě)字母數(shù)字特殊符號(hào)四選三

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

添加錯(cuò)誤提示

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

添加一些樣式

在 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)的錯(cuò)誤提示

question-base.ts

this.prompt = options.prompt || "該項(xiàng)為必填/選項(xiàng)";

添加錯(cuò)誤提示

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

valid 是否驗(yàn)證通過(guò)

touched 是否操作過(guò)

value 控件的值

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

先為 QuestionControlService 添加一個(gè)公開(kāi)的方法，用于設(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, 以便實(shí)時(shí)更新?tīng)顟B(tài)。

現(xiàn)在來(lái)為 InputTextboxComponent 注入這幾個(gè) getter

input-textbox.component.ts

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

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

input-textbox.component.html


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

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

當(dāng)驗(yàn)證不通過(guò)時(shí)：

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

當(dāng)驗(yàn)證通過(guò)時(shí)：

所有選項(xiàng)有正確提示，且表單可提交

讀者可自行完成 InputSelectComponent 的錯(cuò)誤提示驗(yàn)證

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

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

GPU云服務(wù)器云服務(wù)器 php成熟系統(tǒng) 網(wǎng)站后臺(tái)的短信接口使用啥成熟的webrtc開(kāi)源開(kāi)源成熟的Webrtc

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/90608.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

HtmlCssJs

男|高級(jí)講師

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

TA的文章

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

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

閱讀 3709·2021-11-16 11:52
學(xué)Python說(shuō)簡(jiǎn)單真的簡(jiǎn)單，說(shuō)難也難，就由過(guò)來(lái)人給你總結(jié)為什么吧。

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

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

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

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

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

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

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專(zhuān)欄INFORMATION COLUMN

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

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

相關(guān)文章

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

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

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

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

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

發(fā)表評(píng)論

0條評(píng)論

HtmlCssJs

男|高級(jí)講師

TA的文章

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

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

學(xué)Python說(shuō)簡(jiǎn)單真的簡(jiǎn)單，說(shuō)難也難，就由過(guò)來(lái)人給你總結(jié)為什么吧。

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

Day05-flexible.js

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

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

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

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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