自定义 Angular 4 验证器取决于动态值

Posted 2023-03-13

【中文标题】自定义 Angular 4 验证器取决于动态值

【英文标题】：Custom Angular 4 Validator depends on dynamic value

【发布时间】：2018-12-29 09:00:55

【问题描述】：

我必须创建一个自定义验证器validLocation

<input [(ngModel)] ="search" (change)="searchLocation" [validLocation] = "location" />

所以当用户输入一个值时searchLocation会得到搜索到的值并通过Ajax设置location。

问题是我如何在验证指令中跟踪 location 中设置的值

我尝试使用@Input validLocation 和ngOnChanges，但是如何在设置新数据后触发验证，该数据将在解决承诺后设置。

感谢任何帮助。

【问题讨论】：

您能否分享更多代码或将您的示例添加到stackblitz.com ？

【参考方案1】：

如果我理解正确，您可以将您的 promise 或 observable 传递给您的指令，并在它解析时检查它的值，例如：

@Directive( selector: '[validLocation]' )
export class ValidLocation implements OnInit 

isPromiseDone: boolean;
promise: any;

@Input()
set validLocation(passedValue: any) 
    if (!passedValue) 
        return;
    

    const isObservable: boolean = passedValue instanceof Observable;
    const isSubscription: boolean = passedValue instanceof Subscription;
    const isPromise: boolean = passedValue instanceof Promise;

    if (isObservable) 
        this.promise = passedValue.toPromise();
     else if (isSubscription) 
        this.promise = new Promise((resolve) => 
            (passedValue as Subscription).add(resolve);
        );
     else if (isPromise) 
        this.promise = passedValue;
    
    this.checkAndInitPromiseHandler();


constructor() 

initPromiseHandler() 
    const promise = this.promise;
    this.isPromiseDone = false;
    const resolveLoadingState = () => 
        this.isPromiseDone = true;
        this.doSomething()
    ;
    if (promise.finally) 
        promise.finally(resolveLoadingState);
     else 
        promise
            .then(resolveLoadingState, resolveLoadingState);
    


checkAndInitPromiseHandler() 
    if (this.promise) 
        this.initPromiseHandler();
    


ngOnInit() 
    this.checkAndInitPromiseHandler();


doSomething()