问题描述
我在项目中输入了一个简单的清晰度(StackBlitz引用为here)。
<div class="clr-form-control" [ngClass]="{'clr-error': myInput.errors}">
<label class="clr-control-label">My Input</label>
<div class="clr-control-container">
<div class="clr-input-wrapper">
<input id="myinput" type="number" class="clr-input" min="1" max="10"
[(ngModel)]="inputValue" #myInput="ngModel" appMyCheck="12"/>
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
</div>
<span class="clr-subtext" *ngIf="myInput.errors?.inRange">
Error
</span>
</div>
</div>
我在其中添加了验证程序指令appMyCheck
。这是指令的代码
@Directive({
selector: '[appMyCheck]',providers: [{provide: NG_VALIDATORS,useClass: MyCheckDirective,multi: true}]
})
export class MyCheckDirective implements Validator {
@Input('appMyCheck') myValue;
constructor() { }
validate(control: AbstractControl): {[key: string]: any} | null {
console.log('in validate ',this.myValue);
return null;
}
}
因此,我尝试将参数myValue
(从模板代码appMyCheck="12"
发送)发送到指令中,然后直接打印它。但它始终显示undefined
值。
in validate undefined
in validate undefined
如何正确将参数发送到验证程序指令?
解决方法
我编辑了您的代码,它可以正常工作https://stackblitz.com/edit/clarity-nkksjf?file=app%2Fmy-check.directive.ts
import {Directive,Input,forwardRef} from '@angular/core';
import {AbstractControl,NG_VALIDATORS,Validator} from "@angular/forms";
@Directive({
selector: '[appMyCheck]',providers: [{
provide: NG_VALIDATORS,useExisting: forwardRef(() => MyCheckDirective),multi: true
}]
})
export class MyCheckDirective implements Validator {
isValid: any = false;
@Input('appMyCheck') myValue;
set setter (state) {
this.isValid = state;
};
constructor() { }
validate(formController: AbstractControl) {
const validationState = !this.isValid ? {
customKey: true
} : null;
console.log('validation state: ',validationState);
return validationState;
}
}
希望有用