zoukankan      html  css  js  c++  java
  • [Angular2 Form] Angular 2 Template Driven Form Custom Validator

    In this tutorial we are going to learn how we can also implement custom form field validation in Angular 2 template driven forms, by creating our own custom validation directive. We are going to see how to write such directive and how its a best practive to extract the validation function to a separate function, so that it can also be used for model driven validation.

    We are going to learn how we can configure the template driven custom validator directive into the Angular 2 Forms mechanism, by plugging the directive into the dependency injection system using NG_VALIDATORS and forwardRef.

    import {Validator, NG_VALIDATORS, FormControl} from "@angular/forms";
    import {validateDuration} from "./validateDuration";
    import {Directive, forwardRef} from "@angular/core";
    
    export const MIN_LENGTH_VALIDATOR = {
      provide: NG_VALIDATORS,
      multi: true,
      useExisting: forwardRef(() => DurationValidator)
    };
    
    // target and duration with ngModel
    @Directive({
      selector: '[duration][ngModel]',
      providers: [MIN_LENGTH_VALIDATOR]
    })
    export class DurationValidator implements Validator {
      validate(c: FormControl): {[key: string]:any} {
        return validateDuration(c);
      }
    }

    use:

     Duration: <input type="number" name="duration" [(ngModel)]="duration" duration required>
  • 相关阅读:
    Redis配置参数详解
    amoeba实现读写分离
    P1525 关押罪犯 并查集
    模板汇总——treap
    差分约束
    HDU
    CodeForces 522C Chicken or Fish?
    CodeForces 812E Sagheer and Apple Tree 树上nim
    CodeForces 855E Salazar Slytherin's Locket
    CodeForces 283C World Eater Brothers
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6008975.html
Copyright © 2011-2022 走看看