无法将输入参数发送到 Angular 中的验证程序指令

Question

我在我的项目中有一个简单的清晰度输入（StackBlitz ref 是 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

如何正确地将参数发送到验证器指令？

Answer 1

我编辑了你的代码，它工作了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;
  }


 
}

希望有用

无法将输入参数发送到 Angular 中的验证程序指令

Can't send input parameter to validator directive in Angular

angular-directive

angular

vmware-clarity