0

我需要你的帮助。因为一个简单的事情，我真的被阻止了。我也创建了一个 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分别是 start end end range 的输入字段的两个[(ngModel)]绑定变量。

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)将检查上述标准的验证方法。如果两个范围都很好，那么 finallymonthReflection()会被调用，它实际上会反映月份选择器托盘上的选择。

这是代码：

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");   
}

如果范围有效，我希望自动反映月托盘上的范围。我不想使用(keydown)=triggerReflection()，因为那样我将不得不按一些键。我不想要那个。这是堆栈闪电战。请找到组件monthpicker。这只有我们需要解决。

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

4

1 回答 1

1

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

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()
        )
      )
    }

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

于 2020-04-11T17:24:10.773 回答