Angular Reactive Forms. Modify data before assigning to form

Question

I have an Angular reactive form with event_date field. I want to modify the data before assigning to form.

For example I have date in format of:

Tue Aug 28 2018 00:00:00 GMT+0400 (Armenia Standard Time)

And I want to modify it with toLocalString() before assigning to form.

I have tried to use arrow function instead of default value, but with no result.

  tournamentEventForm() : FormGroup{
    return this.fb.group({
      'event_description': '',
      'event_date': (dateString: string)=>{return 'modified string'},
      'event_time': ''
    })
  }

Is there any way to do it without onChange listeners and using only formBuilder syntax?

Check my answer. You can just subscribe to changes on the datepicker and edit the value on the control itself — Vinod Bhavnani

Kliment Ru Kliment Ru · Accepted Answer · 2018-08-31T12:50:36

You add function but need to add value to event_date

tournamentEventForm() : FormGroup{
  return this.fb.group({
    'event_description': '',
    'event_date': this.getModifiedDate(date),
    'event_time': ''
  })
}

private getModifiedDate(dateString: string):string{
  return 'modified string'
}

Angular Reactive Forms. Modify data before assigning to form

2 Answers