2向绑定

Question

我正在使用clrDate的双重绑定，这使我可以加载Javascript Date对象。但是，每次用户更改日期时，我都需要触发一个事件，要么输入一个新日期，要么使用日历。

我尝试过（单击），（更改），（ngModelChange），（模糊）-但由于某种原因，它们似乎都没有触发。

<label for="modelDate" class="clr-control-label" >Model Date:</label>     
<input clrDate type="date" [(clrDate)]="selectedModelDate" (ngModelChange)="loadModel(false)" >

如何在日期选择器中捕获更改？

Answer 1

您可以通过两种方式进行操作。

2向绑定

在this stackblitz中，请注意，在日期选择器与之交互之前，如果单击该按钮，则date1的值是不确定的。选择日期并单击按钮后，它在日期选择器中设置了值。这是Angular中典型的2向绑定。

<section>
  <button class="btn btn-primary" (click)="logDate1()">
    Log Date Value for 2-way binding
  </button>
  <label for="date1" class="clr-control-label" > Date1:</label>     
  <input type="date" [(clrDate)]="date1" />
</section>

反糖化语法

这可能是您所追求的。它与上面的示例几乎相同，但是我们对2向绑定进行了分离或 de-sugarize ，以便使用[clrDate]=date2进行设置。请注意，它会触发事件clrDateChange，该事件可以与logChnage($event)绑定在一起。每当日期选择器的内部值发生变化（例如，用户选择一个日期）时，就会触发该错误，并且您可以在logChange函数中使用其值进行任何操作。这是2向绑定de-sugarized。

<section>
  <h4>De-sugarized syntax</h4>
  <label for="date2" class="clr-control-label" > Date1:</label>     
  <input type="date" [clrDate]="date2" (clrDateChange)="logChange($event)"/>
</section>

如何捕获清晰度日期选择器的更改

1 个答案:

2向绑定

反糖化语法