Angular PatchValue problem with assigning value back to group

Question

I met a problem where I tried to patchValue for one of control in a formgroup. And it never success. I use Angular Material DatePicker with moment.js

Here is the HTML:

<form novalid  [formGroup]="desktopSearchForm">
      <div class="row-content" *ngIf="dateRange">
  <mat-form-field class="desktop-input">
    <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="mobileFromDate" placeholder="From" formControlName="startDate" (focusout)="dateParse(desktopSearchForm.get('startDate'))" />
    <mat-datepicker-toggle matSuffix [for]="mobileFromDate"></mat-datepicker-toggle>
    <mat-datepicker #mobileFromDate></mat-datepicker>
  </mat-form-field>
</div>
</form>

Here is the function I call in (focusout)

 this.desktopSearchForm = this.fb.group({
  classID: [''],
  startDate: [''], //This is the one I want to patch
  endDate: [''],
  transactionTypeID:['']
})

dateParse(control) {
if (control.value) {
  //control.value is a Moment.js Date object
  let group = <FormGroup>control.parent;
  let TheKey;
  Object.keys(group.controls).forEach(key => {
    let childControl = group.get(key);
    if (childControl === control) { // I found the Control I want to patch
      TheKey = key;                 
    }
  })
  group.patchValue({TheKey:control.value}) //I patch it here.

}

this function is for auto assign the correct date format back to the input field (image there are many datepickers with different name such as startDate,endDate etc). e.g I type 25111988 into the input box,while I focus out, the input value changes to '25/11/1988'. But the problem is the control.value never patch to the key which is correctly show 'startDate'.

But If I change it to this and it works:

group.patchValue({startDate : control.value })

Also here is an another problem is:

if I put group.patchValue({startDate : control.value }) into :

Object.keys(group.controls).forEach(key => {
let childControl = group.get(key);
if (childControl === control) {
  group.patchValue({startDate : control.value })
}

})

Then it does not work.that's why I put this patch function outside of the forEach.

Need Help. Many Thanks.

Shouldn't `(focusout)="dateParse(mobileSearchForm.get('startDate'))"` be `(focusout)="dateParse(desktopSearchForm.get('startDate'))"`? (`desktopSearchForm` instead of `mobileSearchForm`) — Dan Dumitru, Sep 26 '18 at 06:15
@DanDumitru Sorry, I have edit the content, now the focusout is passing desktopSearchForm. It was a typo when I tried to copy to here. — Johnathan Li, Sep 26 '18 at 06:25
@JavascriptLover-SKT Yes, I will create a stackblitz for this one later. — Johnathan Li, Sep 26 '18 at 06:27
This question is much more easier to understand and good explanation. https://stackoverflow.com/questions/2274242/how-to-use-a-variable-for-a-key-in-a-javascript-object-literal — Johnathan Li, Sep 27 '18 at 04:12

score 3 · Accepted Answer · answered Sep 26 '18 at 06:44

3

you have to bind dynamic keys where you assigning to TheKey and you can do like this way,

Only change is {TheKey:control.value} to {[TheKey]:control.value}

dateParse(control) {
if (control.value) {
  //control.value is a Moment.js Date object
  let group = <FormGroup>control.parent;
  let TheKey;
  Object.keys(group.controls).forEach(key => {
    let childControl = group.get(key);
    if (childControl === control) { // I found the Control I want to patch
      TheKey = key;                 
    }
  })
  group.patchValue({[TheKey]:control.value}) //I patch it here.
}

answered Sep 26 '18 at 06:44

Aniket Avhad

4,025
2
23
29

Thanks!!!!!!!!!That made my day. But can you explain why the dynamic key is working?? – Johnathan Li Sep 26 '18 at 23:31
In the new ES2015 standard for JavaScript (formerly called ES6), objects can be created with computed keys – Aniket Avhad Sep 27 '18 at 03:19
In earlier JavaScript specifications (ES5 and below), the key in an object literal is always interpreted literally, as a string. To use a "dynamic" key, you have to use bracket notation: – Aniket Avhad Sep 27 '18 at 03:19

Angular PatchValue problem with assigning value back to group

1 Answers1