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

【问题标题】：Custom Angular 4 Validator depends on dynamic value自定义 Angular 4 验证器取决于动态值
【发布时间】：2018-12-29 09:00:55
【问题描述】：

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

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

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

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

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

感谢任何帮助。

【问题讨论】：

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

标签： angular validation angular4-forms

【解决方案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(){}
}

【讨论】：