angular2 formBuilder 组导致参数嵌套

Question

我在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 服务器）时，我可以看到这个参数集：

参数：{"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_date 和end_date 不存在。

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

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

我尝试在强参数中设置嵌套的dates 对象：

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

哪个没有影响（日期不是关联属性？）。所以虽然我可以更新标题，但我不能更新日期。

有没有办法将角度发送的参数展平成这样：

参数：{"id"=>"3", "title"=>"Term Title", "start_date"=>"2016-11-27", "end_date"=>"2016-12-01" }

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

Answer 1

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

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