angular2 formBuilder group causes nesting of params - ruby-on-rails

Question

I have the following formBuilder in angular2:
constructor(
private formBuilder: FormBuilder) {
this.form = formBuilder.group({
id: [],
title: ['', Validators.required],
dates: formBuilder.group({
start_date: ['', Validators.required],
end_date: ['', Validators.required]
}, {validator: this.checkDates})
});
}
dates is in a separate group, this is for validation purposes. onSubmit calls this service method:
update(academicTerm: AcademicTerm): Observable<AcademicTerm> {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http
.patch(this.endpointUrl + academicTerm.id, JSON.stringify(academicTerm), {headers})
.map(this.extractData)
.catch(this.handleError);
}
When I check the backend (Rails5 API server) I can see this param set:
Parameters: {"id"=>"3", "title"=>"Term Title", "dates"=>{"start_date"=>"2016-11-27", "end_date"=>"2016-12-01"}, "academic_term"=>{"id"=>"3", "title"=>"Term CL"}}
Note in the academic_term hash that start_date and end_date are not present.
On the Rails side of things I have strong params set up like this:
def academic_term_params
params.require(:academic_term).permit(:id, :title, :start_date, :end_date)
end
I have tried setting the nested dates object in strong params:
def academic_term_params
params.require(:academic_term).permit(:id, :title, :dates => [:start_date, :end_date])
end
Which has no affect (dates is not an associated attribute?). So while I can update title I cannot update the dates.
Is there a way to flatten the params sent from angular to be something like this:
Parameters: {"id"=>"3", "title"=>"Term Title", "start_date"=>"2016-11-27", "end_date"=>"2016-12-01"}
Or is there a way to fix it on the Rails side?

Answer 1

You can flatten the object before sending the request to the server.
update(academicTerm: AcademicTerm): Observable<AcademicTerm> {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
academicTerm['start_date'] = academicTerm.dates.start_date;
academicTerm['end_date'] = academicTerm.dates.end_date;
// delete academicTerm.dates; // optional
return this.http
.patch(this.endpointUrl + academicTerm.id, JSON.stringify(academicTerm), {headers})
.map(this.extractData)
.catch(this.handleError);
}