其他函数中元素的角度刷新validateFn

Question

我的组件中有这样的元素.html：

<app-form-datetime-block
[settings]="settings.endDateInput"
[disabled]="disabledEnd"
[(ngModel)]="model.endDate"
(changed)="modelChanged($event)"
[minDate]="model.minDate"
[maxDate]="model.maxDate"
[validateFn]="validateEnd"
[showEmptyFields]="showEmptyFields"></app-form-datetime-block>

这就是我的validateFn在component.ts:中声明的方式

validateEnd = (term: moment.Moment): boolean => {
if (this.model.startDate) {
this.checkNearShortTerm(moment(this.model.startDate, 'DD.MM.YYYY', true).toDate(), term.toDate());
if (!this.checkLongTermDates(moment(this.model.startDate, 'DD.MM.YYYY', true).toDate(), term.toDate())) {
return false;
}
const m = moment(this.model.startDate, 'DD.MM.YYYY', true);
return m < term;
}
return true;
}

现在，它在datetime输入中的日期更改时调用。并且"；术语"；是此输入的值。如何从其他函数调用它来手动更改验证？

我试着这样做：

isLongTermChanged($event) {
this.changed.emit($event);
if (this.model.startDate && this.model.endDate) {
this.checkLongTermDates(moment(this.model.startDate, 'DD.MM.YYYY', true).toDate(), 
moment(this.model.endDate, 'DD.MM.YYYY', true).toDate());
validateEnd = (term: moment.Moment): boolean => {
return this.someCheckFucntion(this.model.startDate, this.model.endDate);
}
}
}

但当someCheckFunction返回true或false时，我的日期输入的验证不会改变。在这种情况下；术语"；未定义，因为isLongTermChanged函数是从其他事件调用的，而不是从日期输入调用的。

Answer 1

我为您构建了一个示例。它包括通过一个主题进行交流。它有一个主题，其中一种方法将触发该主题，另一种将观察并进行计算(验证(。

我的例子解释道：如果你点击触发器按钮，它将触发validate字段；并且内部的功能将随机禁用或启用输入字段。因此，在您的情况下，随机化是您的验证逻辑

示例：https://stackblitz.com/edit/angular-7ouncx?file=src%2Fapp%2Fapp.component.ts

其主要思想是将验证函数转化为可观察的函数。因此，该方法将进入以下行：

subject$ = new BehaviorSubject("");
validateEnd$ = this.subject$.pipe(
map(res => {
// your validation logic here
/* return (term: moment.Moment): boolean => {
if (this.model.startDate) { ....
*/
})
);

trigger() {
this.subject$.next("trigger!");
}

示例中的validate$字段在stackblitz中返回一个布尔值，但这只是为了简单起见。您可以像上面的代码块一样返回您的函数。

还要确保您通过html中的async管道订阅此主题，就像我在示例中所做的那样

<app-form-datetime-block
[validateFn]="validateEnd$ | async"