【问题标题】:angular 2 pass array to custom validator (Template driven form)angular 2 将数组传递给自定义验证器(模板驱动形式)
【发布时间】:2017-04-11 09:32:59
【问题描述】:

我需要将一个对象数组传递给 a2 自定义验证器,然后我想根据该数组中的记录验证模板驱动的表单字段的值。

但是我无法在验证器中检索对象。

我唯一能看到的是它的字符串名称。

感谢任何帮助。

<label class="btn btn-default btn-sm"  
[(ngModel)]="krediHesaplamaModel.radioModelKrediTur" name="krediHesaplamaModel.radioModelKrediTur" 
btnRadio="0"  
(click)="onRadioButtonKrediHesaplamaTurChange()" krediTuruValidator="this.krediList" >

import { Directive, forwardRef, Attribute } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';
import {Kredi} from '../kredi';

@Directive({
    selector: '[krediTuruValidator][formControlName],[krediTuruValidator][formControl],[krediTuruValidator][ngModel]',
    providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef(() => KrediTuruValidator), multi: true },
    ]

})


export class KrediTuruValidator implements Validator {

    constructor(  public krediTuruValidator: Kredi[]) { }

    validate(c: AbstractControl): { [key: string]: any } {
        console.log('KL' + this.krediTuruValidator[0].krediTuru); //UNDEFINED

        let v = c.value;
        return null;
    }

}

【问题讨论】:

  • @Attribute('krediTuruValidator') 正在返回一个 string 值,我想您必须先将其解析为 JSON,然后再执行 this.krediTuruValidator[0].krediTuru
  • 感谢您的快速响应。JSON.parse(this.krediTuruValidator) 抛出一个错误,指出无法将 Kredi[] 类型的参数分配给字符串。

标签: validation angular typescript


【解决方案1】:

我通过将验证功能委托给组件中的另一个方法解决了这个问题。这样我就可以访问我想要的任何对象

import { Directive, forwardRef, Attribute, Input } from '@angular/core';
import { Validator, ValidatorFn, AbstractControl, NG_VALIDATORS } from '@angular/forms';


@Directive({
    selector: '[krediVadeSayisiValidator][formControlName],[krediVadeSayisiValidator][formControl],[krediVadeSayisiValidator][ngModel]',
    providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef(() => KrediVadeSayisiValidator), multi: true },]

})


export class KrediVadeSayisiValidator implements Validator {

    @Input() krediVadeSayisiValidator: ValidatorFn; //same name as the selector

    validate(c: AbstractControl): { [key: string]: any } {

              return this.krediVadeSayisiValidator(c);
    }

}

如何在模板中访问它?

    <input type="number" class="form-control" name="krediVadeSayisi" [(ngModel)]="krediHesaplamaModel.krediVadeSayisi" #krediVadeSayisi="ngModel"
        required maxlength="2" [krediVadeSayisiValidator]="validateKrediVadeSayisi()" />  /*this function is inside the component*/

【讨论】:

  • 在模板中,我认为你需要有 [krediVadeSayisiValidator]="validateKrediVadeSayisi" (不带括号)。不错的解决方案。
猜你喜欢
  • 2020-01-26
  • 2018-01-12
  • 2022-07-07
  • 2017-08-05
  • 2017-06-27
  • 2017-12-02
  • 1970-01-01
  • 1970-01-01
  • 2018-12-23
相关资源
最近更新 更多