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>

注意：我还尝试更改日期的格式，并尝试将其设为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();
  }

当我修补值

1 个答案: