类型日期的输入在修补程序值时不会更改

Question

我使用的是角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>

注意事项：我也尝试更改日期的格式，也试图使它成为类型日期的对象，但它没有发生太大变化。

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