這篇文章主要講解了Angular8實現簡單表單驗證的代碼實例，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
簡單表單校驗
傻瓜式校驗
直接復制Antd中demo
<form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" (ngSubmit)="submitForm()">
<nz-form-item>
<nz-form-control nzErrorTip="Please input your username!">
<nz-input-group nzPrefixIcon="user">
<input formControlName="userName" nz-input placeholder="Username" />
</nz-input-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control nzErrorTip="Please input your Password!">
<nz-input-group nzPrefixIcon="lock">
<input formControlName="password" nz-input type="password" placeholder="Password" />
</nz-input-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control>
<button nz-button nzType="primary" [disabled]="!validateForm.valid">Log in</button>
</nz-form-control>
</nz-form-item>
</form>validateForm!: FormGroup;
submitForm(): void {
for (const i in this.validateForm.controls) {
this.validateForm.controls[i].markAsDirty();
this.validateForm.controls[i].updateValueAndValidity();
}
}
constructor(private fb: FormBuilder) {}
ngOnInit(): void {
this.validateForm = this.fb.group({
userName: [null, [Validators.required]],
password: [null, [Validators.required]],
remember: [true]
});
}此類表單校驗較為單一，或者要求比較低，通常即為required校驗，錯誤信息提示也多為固定不變。
智能化校驗
表單一旦開始有具體的細節校驗或者復雜的業務參雜，校驗提示必須準確、清晰。userName為例，除了為必填項，必然需要符合某種格式，亦或是指定郵箱格式等，那么校驗必須同時反映出錯誤類型，本例假設用戶名有長度要求進行演示。
<nz-form-control [nzErrorTip]="getErrTipByField('userName')">
<nz-input-group nzPrefixIcon="user">
<input formControlName="userName" nz-input placeholder="Username" />
</nz-input-group>
</nz-form-control>export class SimpleFormComponent implements OnInit {
validateForm: FormGroup;
errMessageMap = {};
constructor(
private fb: FormBuilder
) { }
ngOnInit() {
this.errMessageMap = {
userName: {
required: 'please input your name!',
minlength: 'please input at least least 5 character'
},
password: {
required: 'please input your password!'
}
};
this.validateForm = this.fb.group({
userName: [null, [Validators.required, Validators.minLength(5)]],
password: [null, [Validators.required]],
remember: [true]
}, { updateOn: 'change' });
}
submitForm(): void {
if (this.validateForm.controls) {
for (const i in this.validateForm.controls) {
if (this.validateForm.controls[i]) {
this.validateForm.controls[i].markAsDirty();
this.validateForm.controls[i].updateValueAndValidity();
}
}
}
}
getErrTipByField(fieldName) {
const errors = this.validateForm.get(fieldName).errors;
let errMsg = '';
for (const key in errors) {
if (errors.hasOwnProperty(key)) {
errMsg += this.errMessageMap[fieldName][key];
}
}
return errMsg;
}
}構建出一個數據對象，以滿足不同字段下不同錯誤類型的錯誤提示，根據業務需求，決定是否顯示全部錯誤信息或者按照業務優先級顯示。
其它細節
表單校驗時機可以設置，默認為change,可選blur 、submit
表單驗證正確的，想要提示勾號可以添加屬性 nzHasFeedback
submit中那段代碼是重新對表單進行驗證了，一般驗證中是不需要的，動態表單驗證后續結合自定義表單服務進行演示。
看完上述內容，是不是對Angular8實現簡單表單驗證的代碼實例有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
