Input of type date doesn't change when i patch value

Question

I'm using angular 2 ReactiveFomrs and i have 2 dates in my form the second one calculated from the first one so I make onclick function on the first one and i change the second one using patchValue but it doesn't change

here is the onclick function

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

and here is the html form input fields

 <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>

note: I also tried to change the format of the date and also tried to make it object of type Date but it didn't change too

score 0 · Answer 1 · answered Mar 26 '18 at 08:14

0

If you are using Reactive Forms, why not make it reactive?

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

answered Mar 26 '18 at 08:14

Tomasz Kula

16,199
2
68
79

actually it changes if i log it but the text inside the input box still "mm/dd/yyyy" not the actual value of that field – Khaled Ahmed Mar 26 '18 at 08:18
if so, it is probably a change detection problem, are you using OnPush? It is not recommended to use OnPush with Forms. – Tomasz Kula Mar 26 '18 at 08:19
no, I don't use it – Khaled Ahmed Mar 26 '18 at 08:20
can you upload the app to https://stackblitz.com/, so I can reproduce the bug. – Tomasz Kula Mar 26 '18 at 08:24
i'm sorry but i can't do this... – Khaled Ahmed Mar 26 '18 at 08:24
do you have [formGroup] tag, anywhere in your html? Like `
`
– Tomasz Kula Mar 26 '18 at 08:25
yes here, http://codepad.org/ONQIJzj7 – Khaled Ahmed Mar 26 '18 at 08:27
Remember subscribe to valueChanges AFTER create the form – Eliseo Mar 26 '18 at 08:27
Can you show how you are building the form? – Tomasz Kula Mar 26 '18 at 08:31
sure, http://codepad.org/axZkccQJ – Khaled Ahmed Mar 26 '18 at 08:32
Try updating the form control directly: this.serviceForm.get('endDate').setValue("2018-02-31") – Tomasz Kula Mar 26 '18 at 08:35
i tried to do this but it didn't work – Khaled Ahmed Mar 26 '18 at 08:37

Input of type date doesn't change when i patch value

1 Answers1