Angular 2 remove or add data to form.value object

Question

I need to remove "toys" from form.value object before submit, and add new data to 'price'. But controls must be declared.

form.value object

{
  "red": 1,
  "green": 3,
  "black": "120",
  "blue": 3,
  "toys": [
    {
      "bear": 0,
      "soldier": 0,
      "car": 0
    }
  ],
  "price": [
    {
      "default": 123,
      "pre": 3,
      "after": 2
    },
    {
      "default": 3,
      "pre": 0,
      "after": 0
    }
  ]
}

ts

 initForm() {
        this.form = this._fb.group({
        red: 0,
        green: 0,
        black: '',
        blue: 0,
        toys: this._fb.array([this.inittoys()]),
        price: this._fb.array([this.initprice()]),

   });

html

 <div class="form-group">
   <label for="black">Max travel time</label>
    <select class="form-control" id="black" formControlName="black">
       <option *ngFor="let t of colors; let i=index" [ngValue]="i">{{t}}</option>
    </select>
</div>

For clearing an array check: https://stackoverflow.com/questions/41852183/angular-2-remove-all-items-from-a-formarray . For patch an array: https://stackoverflow.com/questions/39229398/how-to-update-controls-of-formarray Try to google first next time ;) — Swoox, Nov 30 '17 at 10:22

score 2 · Accepted Answer · answered Nov 30 '17 at 10:52

You can modify the values in the function before you send the form like this:

<form [formGroup]="yourForm" (ngSubmit)="yourSendFunction(yourForm.value)">

....

in the component:

yourSendFunction(values) {

  delete values.toys;

  values.price.push({
             // Here anything you wants to addd
              })

  // Next send the values

}

Angular 2 remove or add data to form.value object

1 Answers1