0

I have got one problem and really don't know how to solve it. Maybe is related to Angular cycles or... The case is next: On the form are two text input fields with button which opens dialog with datepicker. After a date is chosen and confirmed in the dialog, the date is being updated in input field 'From' and the other date 'To' is being calculated and updated in second text field. After these values are shown sometimes I see them properly formatted and sometimes not as if datepipe is not working or the problem is somewhere else but I can't see it.

Below are images from project:

enter image description here

enter image description here

enter image description here

getVisitStartDate() {
    const data: DatePickerData = {
      minDate: new Date()
    };
    this.openDateDialog(data).afterClosed().subscribe(
      (selectedDate: Date) => {
        if (selectedDate) {
          this.validFrom.patchValue(selectedDate);
          this.calculateEndDate();
        }
      }
    );
  }

 calculateEndDate() {
    if (this.validFrom.value && this.visitQuantity.value) {
      this.validTo.patchValue(this.globalService.calculateEndDate(this.validFrom.value, +this.visitQuantity.value));
    }
  }

  get validFrom() {
    return this.visitorsFormGroup.get('validFrom');
  }

                    <div class="input-group mb-1">
                      <input id="valid-from" class="form-control" type="text"
                        [value]="validFrom.value | date:'dd.MM.yyyy. HH:mm'" formControlName="validFrom">
                      <div class="input-group-append">
                        <button class="btn btn-tool" type="button" (click)="getVisitStartDate()"><i
                            class="fa fa-calendar"></i></button>
                      </div>
                    </div>

Some help would be appreciated. Thank you.

Zeljko

ZC10
  • 61
  • 6
  • 1
    Please edit your question and include your code as **text**, not as images. – igg Jan 14 '20 at 13:51
  • 1
    I just edited the post. It is ok now? – ZC10 Jan 14 '20 at 14:03
  • https://stackoverflow.com/questions/49522542/how-to-use-pipes-in-angular-5-reactive-form-input/49577416 – Reza Jan 14 '20 at 15:28
  • This is not my case. I don't mix template driven and reactive form approach. I'm saying that sometimes datepipe doesn't format value after calling patchValue(...) and can't figure why (in first image you can see correct formatting and in third incorrect). – ZC10 Jan 14 '20 at 22:39
  • What I figured till now, when I open angular material dialog with ngbDatepicker, some date is already selected and if I don't change it manually but just confirm it clicking on confirm button, this date is shown in input field 'From' but is not formatted and the same situation is with text field 'To' which is calculated from 'From' date and selected quantity from dropdown. In case when I select some other date in dialog, after confirming it, all date values are properly formatted. What is happening behind, currently I don't understand. – ZC10 Jan 15 '20 at 07:40
  • Case closed I hope. Problem was because these two text fields have been used for synchronization with FormControls but don't need to be. They are merely needed for displaying formatted output. So I removed formControlName from input tags and now everything is ok. My logic was wrong. – ZC10 Jan 15 '20 at 08:18

0 Answers0