Reactive forms angular adding new controls

Question

I am trying to add new form controls on form from array, but i have problem that i have always empty control, even if i have some values in array

This is what i have for now

 this.userVehicles= [];
 this.userVehicles= [{Model: 'Fiat', RegistrationPlate: 'Taxi', LastServiceDate: 'Nov 11', Vin: '111', YearManufacture: '2015'}];

const vehicleFGs: any = this.userVehicles.map(vehicle => this._fb.group({
      Model: [vehicle.model],
      RegistrationPlate: [vehicle.registrationPlate],
      LastServiceDate: [vehicle.lastServiceDate],
      Vin: [vehicle.vin],
      YearManufacture: [vehicle.yearManufacture],
    }));


    const vehicleFormArray: FormArray = this._fb.array(vehicleFGs);
    ((this.myAccountForm as FormGroup).get('Owner') as FormGroup).setControl('Vehicles', vehicleFormArray);

The problem i think i have is in this line ((this.myAccountForm as FormGroup).get('Owner') as FormGroup).setControl('Vehicles', vehicleFormArray);

I think i dont bind controls properly, any idea?

You might take a look at: stackoverflow.com/questions/50520278/… in regards to .setControl() — Brandon Taylor
– Brandon Taylor, Commented Oct 11, 2018 at 19:36
You should be able to use .addControl() instead of .setControl() — Brandon Taylor
– Brandon Taylor, Commented Oct 11, 2018 at 20:11

Brandon Taylor · Accepted Answer · 2018-10-11 20:12:39Z

1

Instead of using .setControl(), use .addControl():

this.form = this.formBuilder.group({
  owner: this.formBuilder.group({}),
});

const vehicleFormGroups: FormGroup[] = this.vehicles.map(v => {
  return this.formBuilder.group({
    model: [
      v.Model,
    ],
    registrationPlate: [
      v.RegistrationPlate,
    ],
    lastServiceData: [
      v.LastServiceDate,
    ],
    vin: [
      v.Vin,
    ],
    yearManufacture: [
      v.YearManufacture,
    ],
  });
});

const vehiclesFormArray: FormArray = new FormArray(vehicleFormGroups);

(this.form.get('owner') as FormGroup).addControl('vehicles', vehiclesFormArray);

answered Oct 11, 2018 at 20:12

Brandon Taylor

34.7k16 gold badges109 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brandon Taylor Over a year ago

I'll try to get a Stack Blitz going as an example. This code is working for me in my local dev environment.

Brandon Taylor Over a year ago

You can view the console output at: stackblitz.com/edit/angular-form-array-example2 to see a working example.

Collectives™ on Stack Overflow

Reactive forms angular adding new controls

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related