摘要:使用搭建成熟可靠的后臺系統四完善動態表單組件添加正則驗證添加錯誤提示添加正則驗證先來設置一些錯誤提示,以及添加正則驗證上一章可能遺留了部分路徑錯誤,可以自行調整郵箱格式不正確請選擇這里是提供的一些正則
使用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 分支上,在未來會分開分支,方便讀者練習)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90608.html
摘要:使用搭建成熟可靠的后臺系統三完善動態表單添加樣式。下一章會講解,一個集成的服務,來完成我們的提交,在將來的篇章里會在我們的組件中加入使其變得更加靈活。 使用ng2-admin搭建成熟可靠的后臺系統 -- ng2-admin(三) 完善動態表單 添加樣式。 抽離組件。 添加組件樣式 上一篇文章創建了兩個,組件,現在使用bootstrap來給他們添加一些樣式 首先需要一個公用的 s...
摘要:使用搭建成熟可靠的后臺系統二構建動態表單構建一個動態表單,動態生成控件,驗證規則。現在來創建它的子組件從上面的組件可以看出,未來需要添加組件時,只需要添加一種類型,可以用決定顯示哪種類型的問題。 使用ng2-admin搭建成熟可靠的后臺系統 -- ng2-admin(二) 1.構建動態表單 構建一個動態表單,動態生成控件,驗證規則。 創建一個input組件,一個select組件 將...
摘要:注意在配置完成后,需要重新啟動項目使配置生效。每一行的內容,由數據內容決定,例如有三條數據,應顯示三行數據,數據由組件自身請求獲取,所以應該有一個自身的屬性用于承載數據。注意這里將換成了,所以組件的也需要替換,否則會報錯。 使用ng2-admin搭建成熟可靠的后臺系統 -- ng2-admin(六) 完善動態表單組件 先來張本章節最終效果圖showImg(https://segmen...
摘要:創建一個工具類,負責提供以及完成拼接參數的工作。根據我們的配置,來創建這個文件。因為是表單提交,所以我們新建一個服務,由它來完成表單提交的最后一步。 使用ng2-admin搭建成熟可靠的后臺系統 -- ng2-admin(五) 完善動態表單組件 升級Angular 4.1 -> 4.3 添加 json-server 模擬數據 創建自己的 http 完成一次表單提交 升級Angu...
摘要:云函數是萬金油為實現用戶游戲數據存儲和每日任務分發,我們最先用了存儲服務和云引擎。不過我們并沒有用提供的來直接調用存儲服務,而是選擇用調用云引擎里面的云函數,然后通過云函數調用存儲服務來實現相應的邏輯。 【 玩轉 LeanCloud 】開發者投稿分享: 作者:趙天澤 作為一個通過 LeanCloud 入門后端開發的小白,一年多的開發歷程讓我收獲滿滿。多個項目也在 LeanCloud 可...
閱讀 3164·2021-11-19 09:40
閱讀 3653·2021-11-16 11:52
閱讀 2984·2021-11-11 16:55
閱讀 3174·2019-08-30 15:55
閱讀 1182·2019-08-30 13:08
閱讀 1659·2019-08-29 17:03
閱讀 3016·2019-08-29 16:19
閱讀 2583·2019-08-29 13:43