Angular表單驗證器

lncwwn 發布于2019-08-22 13:54 / 369人閱讀

摘要：表單驗證器為何使用驗證器原因用戶輸入的數據各式各樣并不總是正確的如果用戶輸入了錯誤的數據格式那么我們希望給他們提供實時正確的反饋并且阻止表單的提交因此我們需要驗證器來處理這些情況驗證器驗證器由模塊提供該模塊從中導出使用驗證器的方法為對象指定

Angular 表單驗證器 為何使用驗證器?

原因: 用戶輸入的數據各式各樣,并不總是正確的,如果用戶輸入了錯誤的數據格式,那么我們希望給他們提供實時正確的反饋,并且阻止表單的提交.因此,我們需要驗證器來處理這些情況.

Angular 驗證器

1.驗證器由Validators模塊提供,該模塊從"@angular/forms"中導出

import { Validators }from"@angular/forms"

2.使用驗證器的方法

// 為FormControl對象指定一個驗證器
// 在視圖中檢查驗證器的狀態,并根據返回值做出反應
例子1:
    let control = new FormControl("name", Validators.required);
例子2:
    this.myForm = this.fb.group({
        "name": ["", Validators.required]
    });

3.驗證器可以驗證的信息

// 檢查單個字段的有效性
方式一: myForm.controls["name"].hasError("");
方式二: myForm.hasError("", "name");
// 檢查整個表單的有效性
myForm.valid   // 整個formGroup是否可用
myForm.dirty   // 是否被修改過
myForm.touched // 是否提交過

自定義驗證器

1.首先查看Angular源代碼,例如Validators.required:

export class Validators {
    static required(c: FormControl): StringMap {
        return isBlank(c.value) || c.value == "" ? { "required": true } : null;
    }
}

2.編寫自定義驗證器

// name必須以"zhou"開頭
function nameValidator(control: FormControl): { [s: string]: boolean } {
    if (!control.value.match(/^zhou/)) {
        return { invalidName: true };
    }
}
// 使用方法
this.myForm = this.fb.group({
    "name": ["", [Validators.required, this.nameValidator]]
});

云服務器 GPU云服務器驗證表單表單驗證表單驗證代碼表單驗證實例

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92591.html

angular表單驗證2

摘要：表單驗證使用場景在實際的開發中我們可能會有這樣的情況。姓名不能為空姓名太短姓名太長姓名不能為空姓名太短姓名太長借助表單本身比之前的更簡單了。結尾以上就是關于表單驗證的全部內容。前言在之前的文章《angular表單驗證》中主要介紹了一些關于angular表單驗證的基礎知識。在此篇中將著重以擴展angular表單驗證的相關內容和實際開發中的應用為主。表單驗證使用場景1 在實際的開發...

darkbug 2019-08-19 17:41 評論0 收藏0
angular6的響應式表單

摘要：在模塊里面引入要使用響應式表單，就要從包中導入，并把它添加到你的的數組中。導入驗證器函數響應式表單包含了一組開箱即用的常用驗證器函數。這些驗證器屬性可以和響應式表單提供的內置驗證器組合使用。 1：在AppModule模塊里面引入 ReactiveFormsModule 要使用響應式表單，就要從@angular/forms包中導入ReactiveFormsModule，并把它添加到你的N...

alogy 2019-08-29 16:54 評論0 收藏0
angular6的響應式表單

摘要：在模塊里面引入要使用響應式表單，就要從包中導入，并把它添加到你的的數組中。導入驗證器函數響應式表單包含了一組開箱即用的常用驗證器函數。這些驗證器屬性可以和響應式表單提供的內置驗證器組合使用。 1：在AppModule模塊里面引入 ReactiveFormsModule 要使用響應式表單，就要從@angular/forms包中導入ReactiveFormsModule，并把它添加到你的N...

hzc 2019-08-02 11:40 評論0 收藏0
angular6的響應式表單

摘要：在模塊里面引入要使用響應式表單，就要從包中導入，并把它添加到你的的數組中。導入驗證器函數響應式表單包含了一組開箱即用的常用驗證器函數。這些驗證器屬性可以和響應式表單提供的內置驗證器組合使用。 1：在AppModule模塊里面引入 ReactiveFormsModule 要使用響應式表單，就要從@angular/forms包中導入ReactiveFormsModule，并把它添加到你的N...

MycLambert 2019-08-23 12:16 評論0 收藏0