当我修补值时，日期类型的输入不会改变[重复]

Question

我使用 angular 2 ReactiveFomrs 并且我的表单中有 2 个日期，第二个日期是从第一个日期计算出来的，所以我在第一个日期上创建 onclick 函数，然后我使用 patchValue 更改第二个日期但是它没有改变

这里是onclick函数

onDeliveryDateChange() {
  this.serviceForm.patchValue({
    endDate: "2018-02-31"
  })
}

这里是html表单输入字段

 <div class="form-row">
        <div class="form-group col-6">
          <div class="row">
            <label class="col-form-label col-4" for="deliveryDate">Delivery Date</label>
            <input
              type="date"
              id="deliveryDate"
              class="form-control col-7"
              formControlName="deliveryDate"
              (change)="onDeliveryDateChange()">
            <p
              *ngIf="serviceForm.get('deliveryDate').invalid && 
                      serviceForm.get('deliveryDate').touched && 
                      serviceForm.get('deliveryDate').errors['required']"
              class="text-danger col-7 offset-4">
              Delivery Date Can not be empty
            </p>
            <p
              *ngIf="serviceForm.get('deliveryDate').invalid && 
                      serviceForm.get('deliveryDate').touched && 
                      serviceForm.get('deliveryDate').errors['minDate']"
              class="text-danger col-7 offset-4">
              Please don't choose the date before {{currentDate|date}}.
            </p>
          </div>
        </div>
      </div>
      <div class="">
        <div class="form-group col-6">
          <div class="row">
            <label class="col-form-label col-4" for="endDate">End Date</label>
            <input
              type="date"
              id="endDate"
              class="form-control col-7"
              formControlName="endDate"
              [readOnly]="serviceForm.get('contractTerm').value != 4">
            <p
              *ngIf="serviceForm.get('endDate').invalid && 
                      serviceForm.get('endDate').touched && 
                      serviceForm.get('endDate').errors['required']"
              class="text-danger col-7 offset-4">
              End Date Can not be empty
            </p>
            <p
              *ngIf="serviceForm.get('endDate').invalid && 
                      serviceForm.get('endDate').touched && 
                      serviceForm.get('endDate').errors['minDate']"
              class="text-danger col-7 offset-4">
              Please choose the date after {{serviceForm.get('deliveryDate').value}}.
            </p>
          </div>
        </div>
      </div>

注意：我也尝试更改日期的格式，并尝试将其设为 Date 类型的对象，但它也没有改变

Answer 1

如果您使用的是响应式表单，为什么不让它成为响应式？

  sub: Subscription;

  ngOnInit() {
    const deliveryDate: FormControl = this.serviceForm.get('deliveryDate');
    const endDate: FormControl = this.serviceForm.get('endDate');

    this.sub = deliveryDate.valueChanges.subscribe(v => {
      endDate.setValue(v)
      // or endDate.setValue("2018-02-31")
      // or anything you want
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }