为什么在使用 "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 格式： { year: 1999, month: 01, day: 01}.

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

有谁知道如何实现这两个功能？在不删除必需属性的情况下显示日期值？

Answer 1

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

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

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

Answer 2

原因

输入未显示绑定值，因为它已将 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>

为什么在使用 "required" 属性时绑定无法正常工作？

Why the binding is not working properly when using the "required" attribute?

angular

angular-forms

angular-validation

原因

解决方案

例子

结果