javascript - 如何使用 DoCheck 在月份选择器上反射(reflect)/突出显示手动输入的月份 [Angular]

Question

我需要你的帮助。我真的因为一件简单的事情而被封锁。我也创建了一个 stackblitz，但首先我会解释一下问题。事情比较复杂，请耐心看完。我创建了自己的时间范围选择器。有效范围是:02-01-2019 - 09-01-2020。格式为mm-dd-yyyy。我已经为此创建了一个合适的用户界面。可以通过两种方式进行选择:

1. 点击月份。 [此功能运行良好]
2. 通过手动输入日期[这不起作用。我在这里需要帮助]

我还使用 moment 进行基本验证:

1. 有效年份为 [2016 年、2019 年]
2. startRange 不应位于 endRange'
3. 格式应为mm-dd-yyyy

注意:startRange 和 endRange 是两个 [(ngModel)] 绑定(bind)变量，分别用于 start end end range 的输入字段。

monthpicker.component.html

<div class="wrapper" [class.warning-border]="isApplied">
   <input type="text" [(ngModel)]="startRange" class="start-range custom-input-field">
   ....
   <input type="text" [(ngModel)]="endRange" class="end-range custom-input-field">
   ....
</div>

以下是monthpicker.component.ts中的重要方法列表:

1. onClick(indexClicked) - 每当单击月份名称时都会调用此方法。这是为了使用鼠标单击进行选择。目前运行良好。
2. triggerReflection() - 当我通过键盘输入日期时应该调用此方法。这将调用验证方法 validate(startRange,endRange) 来检查上述条件。如果两个范围都不错，那么最终会调用 monthReflection() ，这将实际反射(reflect)月份选择器托盘上的选择。

代码如下:

triggerReflection() {
    ....
      ....
        this.validate(this.startRange, this.endRange);
        if (this.isValidRange) {
            this.monthRangeReflection();
        } else {
            this.isValidRange = false;
        }
    } ....
}

但是反射没有发生。我检查了很多解决方案。我使用 DoCheck 因为我希望在输入日期时进行验证:

ngDoCheck(): void {
    this.validate(this.startRange, this.endRange);
    console.log("ngDocheckCalled");   
}

如果范围有效，我希望自动反射(reflect)月份托盘上的范围。我不想使用 (keydown)=triggerReflection() 因为那样我就必须按某个键。我不想要这样。这是stackblitz 。请找到组件monthpicker。这只是我们需要解决的问题。

欢迎询问更多信息。请帮我。我尝试了很多解决方案，现在 Stackoverflow 是我最后的希望。

Answer 1

解决方案与您的其他问题相同。订阅输入字段的 valuesChanges 可观察值。只需几行代码，您就可以在用户手动输入日期时调用 this.triggerReflection。您必须在 AfterViewInit 生命周期 Hook 中设置订阅:

export class MonthpickerComponent implements OnInit, DoCheck, AfterViewInit {
    @Output() outputToParent = new EventEmitter<string>();
    @Output('timeselectorValidation') timeselectorValidation: EventEmitter<any> = new EventEmitter();

    @ViewChildren(NgModel) dateRefs: QueryList<NgModel>;

    ngAfterViewInit() {
      this.dateRefs.forEach(ref => 
        ref.valueChanges.subscribe(() =>
          this.triggerReflection()
        )
      )
    }

检查我从您的代码中 fork 的 Stackblitz:https://stackblitz.com/edit/angular-dcugua 。以上是我所做的唯一更改(在triggerReflection方法中添加了console.log)。