angular2 FormBuilder groupe provoque l'imbrication des params

Question

J'ai la FormBuilder suivante 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 est dans un groupe distinct, c'est à des fins de validation. onSubmit appelle cette méthode de service:

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

Quand je vérifie le backend (serveur API Rails5) Je peux voir cet ensemble param:

Paramètres: {title "id" => "3", » "=>" Titre du terme "," dates "=> {" start_date "=>" 2016-11-27 "," end_date "=>" 2016-12-01 "}," academic_term "=> {" id " => "3", "title" => "terme CL"}}

note dans le hachage academic_term que start_date et end_date ne sont pas présents.

Du côté des rails des choses que j'ai fort params mis en place comme ceci:

def academic_term_params 
    params.require(:academic_term).permit(:id, :title, :start_date, :end_date) 
end 

J'ai essayé de placer l'objet dates imbriqué dans params forts:

def academic_term_params 
    params.require(:academic_term).permit(:id, :title, :dates => [:start_date, :end_date]) 
end 

qui n'a aucun effet (les dates ne sont pas des attributs associés?). Donc, même si je peux mettre à jour le titre, je ne peux pas mettre à jour les dates.

est-il un moyen d'aplanir les params envoyés par angulaire à quelque chose comme ceci:

Paramètres: { "id" => "3", "title" => "Titre terme", " start_date "=>" 2016-11-27 "," end_date "=>" 2016-12-01 "}

Ou y a-t-il un moyen de le réparer sur le côté Rails?

Answer 1

Vous pouvez aplatir l'objet avant d'envoyer la requête au serveur.

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