[Angular 2] Custom Validtors

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 73 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/4948867.html

文章标签：

#javascript #ViewUI

本文介绍如何使用Angular实现一个自定义验证器，该验证器只接受以123开头的字符串，并通过HTML和Angular组件集成进行展示。

Create a custom validtor which only accepts the string start with '123';

    function skuValidator(control){
         if(!control.value.match(/^123/)){
             return {invalidSku: true};
         }
    }

If it not start with 123, then return the object {invalidSku: true}, which later will be used in the html.

To use this validtor:

        this.myForm = fb.group({
            "sku": ["", Validators.compose([
                Validators.required,
                skuValidator
            ])]
        });

Use Validators.compose([...]) to accpet mutli valiators.

In HTML:

            <div *ng-if="sku.control.hasError('invalidSku')">
                SKU is required
            </div>

Code:

import {Component, View, FORM_DIRECTIVES, Validators, FormBuilder, NgIf} from 'angular2/angular2';

@Component({
    selector: 'demo-form-sku'
})
@View({
    directives: [FORM_DIRECTIVES, NgIf],
    template: `
       <div>
        <h2>Demo Form: Sku</h2>
        <!-- ngForm is attched to the form, and #f="form" form is also come from ngForm-->
        <form [ng-form-model]="myForm"
        (submit)="onSubmit(myForm.value)">
            <div class="form-group" [class.has-error]="!sku.valid && sku.touched">
                <label for="skuInput">SKU</label>
                <input type="text"
                class="form-control"
                id="skuInput"
                #sku = "form"
                placeholder="SKU"
                [ng-form-control]="myForm.controls['sku']">
            </div>
            <div *ng-if="!sku.control.valid"
               class="bg-warning">SKU is invalid</div>
            <button type="submit" class="btn btn-default">Submit
            </button>
            <div *ng-if="sku.control.hasError('invalidSku')">
                SKU is required
            </div>

        </form>
        <div *ng-if="!myForm.valid"
              class="bg-warning">Form is invalid</div>
       </div>
    `
})

export class DemoFormSku {
    myForm: ControlGroup;
    constructor(fb:FormBuilder) {
        this.myForm = fb.group({
            "sku": ["", Validators.compose([
                Validators.required,
                skuValidator
            ])]
        });
        this.sku = this.myForm.controls['sku'];
    }

    onSubmit(value){
        console.log(value);
    }
    
    function skuValidator(control){
         if(!control.value.match(/^123/)){
             return {invalidSku: true};
         }
    }
}