zoukankan      html  css  js  c++  java
  • [Angular 2] Custom Validtors

    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};
             }
        }
    }

  • 相关阅读:
    apache 多站点设置
    关键词使用什么分隔符好
    ASP.NET MVC ModelState与数据验证【转】
    Sealed,new,virtual,abstract与override的区别
    ASP.NET MVC4中调用WEB API的四个方法
    wcf 基础连接已经关闭: 连接被意外关闭
    解决MySQL不允许从远程访问的方法有哪些?
    PHP魔法函数 自动转义 magic_quotes_gpc和magic_quotes_runtim
    Html.RenderPartial与Html.RenderAction 用法
    MVC中的扩展点 ActionResult
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4948867.html
Copyright © 2011-2022 走看看