angular2 formBuilder组导致参数嵌套

angular2 formBuilder group causes nesting of params

我在 angular2 中有以下 formBuilder:

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 在一个单独的组中,这是为了验证目的。 onSubmit 调用此服务方法:

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

当我检查后端(Rails5 API 服务器)时,我可以看到这个参数集:

Parameters: {"id"=>"3", "title"=>"Term Title", "dates"=>{"start_date"=>"2016-11-27", "end_date"=>"2016-12-01"}, "academic_term"=>{"id"=>"3", "title"=>"Term CL"}}

请注意 academic_term 散列中 start_dateend_date 不存在。

在 Rails 方面,我设置了强大的参数,如下所示:

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

我试过在强参数中设置嵌套 dates object:

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

哪个没有影响(日期不是关联属性?)。因此,虽然我可以更新标题,但无法更新日期。

有没有办法将 angular 发送的参数展平成这样:

Parameters: {"id"=>"3", "title"=>"Term Title", "start_date"=>"2016-11-27", "end_date"=>"2016-12-01"}

或者有没有办法在 Rails 端修复它?

您可以在向服务器发送请求之前展平对象。

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