使用ng2-admin搭建成熟可靠的后臺(tái)系統(tǒng) -- ng2-admin（四）
完善動(dòng)態(tài)表單組件
添加正則驗(yàn)證
添加錯(cuò)誤提示
添加正則驗(yàn)證
先來設(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<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: "請(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-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}$/, //要求大小寫字母數(shù)字特殊符號(hào)四選三
approvalStatus: /(2|3)/,
};
添加錯(cuò)誤提示
在驗(yàn)證無法通過時(shí)，用戶不清楚自己未通過驗(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)證通過
- touched 是否操作過
- value 控件的值
現(xiàn)在來為控件添加提示樣式
先為 QuestionControlService 添加一個(gè)公開的方法潘鲫，用于設(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ài)。
現(xiàn)在來為 InputTextboxComponent 注入這幾個(gè) getter
input-textbox.component.ts
export class InputTextboxComponent {
...
constructor(private qcs: QuestionControlService) {
qcs.getControlProperty.call(this, null);
}
}
然后需要在 html 中添加一些規(guī)則肋杖， 來顯示這些錯(cuò)誤提示
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>
這樣就大功告成溉仑，以下是實(shí)際效果圖
當(dāng)驗(yàn)證不通過時(shí)：
錯(cuò)誤提示出現(xiàn)，輸入框有紅色線框環(huán)繞状植，且提交按鈕為置灰狀態(tài)
當(dāng)驗(yàn)證通過時(shí)：
所有選項(xiàng)有正確提示浊竟，且表單可提交
讀者可自行完成 InputSelectComponent 的錯(cuò)誤提示驗(yàn)證
下章將會(huì)講解如何提交一個(gè)表單，基本的增刪改查津畸，將會(huì)使用到 httpClient.
（此章以及此章前振定，代碼都提交在 ng2-admin 的 development 分支上，在未來會(huì)分開分支肉拓，方便讀者練習(xí)）
