Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/search/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Forms Angular2-访问validation指令中的AbstractControl实例_Forms_Validation_Angular_Typescript_Angular2 Directives - Fatal编程技术网

Forms Angular2-访问validation指令中的AbstractControl实例

Forms Angular2-访问validation指令中的AbstractControl实例,forms,validation,angular,typescript,angular2-directives,Forms,Validation,Angular,Typescript,Angular2 Directives,我必须从验证器指令内部触发验证 这是我的指令。它按预期工作。但是,我希望它在验证器功能更改时触发验证过程。即当其输入变量maxDate改变时 我怎么能这样做 如果我可以访问构造函数中的AbstractControl实例,我就可以轻松做到这一点。但是,我想不出一个办法。 import { AbstractControl, FormGroup, ValidatorFn, Validator, NG_VALIDATORS, Validators } from '@angular/forms'; imp

我必须从验证器指令内部触发验证

这是我的指令。它按预期工作。但是,我希望它在验证器功能更改时触发验证过程。即当其输入变量
maxDate
改变时

我怎么能这样做

如果我可以访问构造函数中的AbstractControl实例,我就可以轻松做到这一点。但是,我想不出一个办法。

import { AbstractControl, FormGroup, ValidatorFn, Validator, NG_VALIDATORS, Validators } from '@angular/forms';
import { Directive, Input, OnChanges, SimpleChanges, EventEmitter } from '@angular/core';


function parseDate(date: string):any {  
  var pattern = /(\d{2})-(\d{2})-(\d{4})/;
  if (date) {
    var replaced = date.search(pattern) >= 0;    
    return replaced ? new Date(date.replace(pattern,'$3-$1-$2')) : null;
  }

  return date;
}


export function maxDateValidator(maxDateObj): ValidatorFn {
  return (control:AbstractControl): {[key: string]: any} => {    
    const val = control.value;

    let date = parseDate(val);
    let maxDate = parseDate(maxDateObj.max);    

    if (date && maxDate && date > maxDate) {
      return {
        maxDateExceeded: true
      };
    }
    return null;
  };
}

用法:

  <input type="text" [(ngModel)]="deathDateVal">

  <input class="form-control"          
          type="text"
          tabindex="1"
          [maxDate]="deathDateVal"
          name="will_date"
          [textMask]="{pipe: datePipe, mask: dateMask,  keepCharPositions: true}"
          ngModel
          #willDate="ngModel">

以下是我刚想到的:

@Directive({
  selector: '[maxDate]',  
  providers: [{provide: NG_VALIDATORS, useExisting: maxDateDirective, multi: true}]  
})
export class maxDateDirective implements Validator, OnChanges {
  @Input() maxDate: string;

  private valFn = Validators.nullValidator;
  private control:AbstractControl;

  constructor() { }

  ngOnChanges(changes: SimpleChanges): void {
    const change = changes['maxDate'];
    if (change) {
      const val: string  = change.currentValue;      
      this.valFn = maxDateValidator(val);
    }
    else {
      this.valFn = Validators.nullValidator;
    }

    if (this.control) {
      this.control.updateValueAndValidity(this.control);
    }
  }

  validate(_control:AbstractControl): {[key: string]: any} {
    this.control = _control;
    return this.valFn(_control);
  }
}
它起作用了<代码>验证在初始化时被调用,所以我只存储它的参数。
这是他妈的丑陋,但它是有效的。

要获得对输入的抽象控制,您可以执行以下操作:

@Directive({
  // tslint:disable-next-line:directive-selector
  selector: 'input[type=date][maxDate]'
})
export class InputFullWithDirective implements Validator, OnChanges {
  constructor(@Self() private control: NgControl) {}
  /** the rest is mostly unchanged from the question */
}

您的代码似乎正常,有什么问题吗?我想在验证参数更改时重新触发验证。例如
maxDate
对不起,我不明白<代码>ngOnChanges在任何输入更改时都会调用,因此无论何时
maxDate
更改时都会调用。你的代码应该正常工作。是的,正常。但是,验证过程不会随之触发<代码>willDate。错误保持不变。仅从代码看,我不明白为什么。此外,您的代码几乎是一字不差的,因此应该可以正常工作……我正在寻找一种方法,以使指令中的控件具有不同的用途。我到处搜寻,尝试了多种方法。这对我来说应该很有效,但并不理想。如果你在这件事上还有什么发现,请告诉我。
@Directive({
  // tslint:disable-next-line:directive-selector
  selector: 'input[type=date][maxDate]'
})
export class InputFullWithDirective implements Validator, OnChanges {
  constructor(@Self() private control: NgControl) {}
  /** the rest is mostly unchanged from the question */
}