Rails has_many input from Angular2 front end won't save - ruby-on-rails

Question

I'm building an Angular 2 front-end app that's getting data from a Rails 5 API. It's a kind of network inventory app.
I've got a Asset-form in Angular2 and there's an multi-select input for the ip_addresses of the asset.
I'm unable to get Rails to accept this data in the back-end.
The asset object:
{"name":"SERVER_A","serial":"XOR-354","location_id":1,"asset_type_id":1,"model_id":3,"ip_address_ids":[5304,5305]}
Here's my asset.service.ts:
createAsset(asset: Asset){
let formData = new FormData();
for(var key in asset){
if(key == "ip_address_ids") {
for (var i = 0; i < asset[key].length; i++) {
formData.append("asset["+key+"][]", JSON.stringify(asset[key][i]));
console.log("asset["+key+"][]", JSON.stringify(asset[key][i]));
}
}
if(key != "id") {
formData.append("asset["+key+"]", asset[key]);
}
}
let headers = new Headers();
let authToken = localStorage.getItem('auth_token');
headers.append('Authorization', authToken);
return this.http.post(this.assetUrl, formData, { headers })
.map((response: Response) => response.json());}
This is what im getting in the Rails server console:
Started POST "/assets" for ::1 at 2017-02-06 13:58:33 +0100
Processing by AssetsController#create as HTML
Parameters: {"asset"=>{"name"=>"SERVER_A", "description"=>"undefined",
"serial"=>"XOR-354", "asset_tag"=>"undefined",
"firmware"=>"undefined", "ssh"=>"undefined", "telnet"=>"undefined",
"http"=>"undefined", "location_id"=>"1", "asset_type_id"=>"1",
"model_id"=>"3", "prtg_id"=>"undefined", "ticket_id"=>"undefined",
"ip_address_ids"=>"5304,5305"}}
Unpermitted parameter: ip_address_ids
I've permitted the param of ip_address_ids
def asset_params
params.require(:asset).permit(:name, :description, :serial, :asset_tag, :firmware, :ssh, :telnet, :http, :location_id, :asset_type_id, :model_id, :prtg_id, :ticket_id, :ip_address_ids => [])
end
The strange thing is that if I use the Advanced REST Client in Chrome It's successful.
Here's an image of the REST Client
The result in the Rails server console:
Started POST "/assets" for ::1 at 2017-02-06 14:04:42 +0100
Processing by AssetsController#create as HTML
Parameters: {"asset"=>{"name"=>"Test", "asset_type_id"=>"2", "location_id"=>"33", "model_id"=>"4", "ip_address_ids"=>["5213", "5214"]}}
I think that the problem is that Angular sends the IDs as a string and the REST Client sends the IDs as an Array of strings.
Any idea on how to fix this?

Answer 1

Your ip_address_ids params is being passed as string, rather than array, why not use formData = JSON.stringify({asset: asset}) instead of custom processing?
If the case is that you want to pass it as an actual string you should not permit it with => [], only :ip_address_ids would be enough.