为什么使用“ required”属性时绑定不能正常工作？

Question

我在Angular组件中具有以下HTML代码，这些代码已被调用以显示记录详细信息：

<div class="form-group">
    <label for="date1">Date 1 *</label>
    <div class="input-group">
      <input 
          class="form-control" 
          placeholder="yyyy-mm-dd" 
          id="date1" 
          name="date1"
          [ngModel]="date1"
          required
          #date1=ngModel
          [class.field-error]="form.submitted && date1.invalid"
          ngbDatepicker #da2="ngbDatepicker" 
          tabindex="13">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary calendar" (click)="da2.toggle()" type="button"></button>
      </div>
    </div>
</div>

如您所见，这是一个输入控件，它以yyyy-MM-dd格式显示日期值。

在ngModel上使用的变量 date1 采用JSON格式： {年：1999，月：01，日：01} 。

因此，在呈现组件时，此特定控件未在date1变量上显示绑定值。但是，如果我删除了必需的属性，则会显示该值。

有人知道如何实现这两个功能吗？显示日期值而不删除必填属性？

Answer 1

原因

输入未显示绑定值，因为它的id和name设置为date1，并且变量也命名为date1。

解决方案

将[ngModel]="date1"中使用的类型NgbDateStruct的变量重命名为其他变量，例如myDate。

示例

ts：

myDate: NgbDateStruct = { year: 1969, month: 11, day: 2 };

html：

<div class="form-group">
    <label for="date1">Date 1 *</label>
    <div class="input-group">
        <input 
        class="form-control" 
        placeholder="yyyy-mm-dd" 
        id="date1" 
        name="date1"
        [ngModel]="myDate"
        required
        #date1=ngModel
        ngbDatepicker #da2="ngbDatepicker" 
        tabindex="13">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary calendar" (click)="da2.toggle()" type="button"></button>
        </div>
    </div>
</div>

结果

Answer 2

而不是一个控件，而是跟踪三个不同的属性（年，月和日）。为什么不将JSON对象转换为新的Date对象并绑定到该对象。该对象将保留所有值。

var d = new Date(2019, 11, 10);  // The 11 represents December. Subtract One from the month.

这应该解决所需的问题。 Date1是什么类型的对象？应该是日期。