0

I have a problem pushing the conversions array inside the itemsForm. How will able to do it in Angular? Thanks

this.itemsForm = this.fb.group({
  name: [null, Validators.required],
  description: [null, Validators.required],
});

this.selectConversionsForm = this.fb.group({
  selectConversionRows: this.fb.array([])
});

const conversions = [];

(this.selectConversionsForm.get('selectConversionRows') as FormArray).getRawValue().forEach(item => {
  conversions.push({
    conversion_id: item['conversion_id'],
  });
});

const yeah = this.itemsForm.push(conversions);
console.log(yeah);


 EXPECTED RESULT: 
   name: 'sample name', 
   description: 'sample desc', 
   conversions: [{conversion_id: 1}, {conversion_id: 2}, {conversion_id: 3}]
2
  • what is itemsForm? what is selectConversionsForm? please explain your question and code completely. Commented Feb 5, 2019 at 13:05
  • Here one example of adding row is keepnote.cc/code/… Commented Feb 11, 2019 at 10:48

1 Answer 1

1

You're doing this the wrong way. Either you'll have to create a conversations FormArray to your parent FormGroup and then push FormGroups to it. Or you'll have to add the conversations control using the addControl method on a FormGroup.

I'd recommend using the first approach. So here's how you can do it following that:

import { Component } from '@angular/core';
import { FormBuilder, FormArray, Validators, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  itemsForm: FormGroup;
  selectConversionsForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.itemsForm = this.fb.group({
      name: [null, Validators.required],
      description: [null, Validators.required],
      conversions: this.fb.array([])
    });

    // Seed selectConversionRows form group with the seed data
    // Generally this would come from the user selection. I'm assuming that you're already getting that.
    const conversions = [
      { conversion_id: 1 }, 
      { conversion_id: 2 }, 
      { conversion_id: 3 }
    ];

    // Seeding the Conversions   
    this.selectConversionsForm = this.fb.group({
      selectConversionRows: this.fb.array(conversions.map(conv => this.generateConversionFormArray(conv.conversion_id)))
    });

    const selectedConversions = this.selectConversionRows.value;
    selectedConversions.forEach(conversion => this.conversionsArray.push(this.generateConversionFormArray(conversion.conversion_id)));

    // EXPECTED RESULT: 
    //   name: 'sample name', 
    //   description: 'sample desc', 
    //   conversions: [{conversion_id: 1}, {conversion_id: 2}, {conversion_id: 3}]
    console.log(this.itemsForm.value);
  }

  generateConversionFormArray(id) {
    return this.fb.group({
      conversion_id: this.fb.control(id)
    });
  }

  get conversionsArray() {
    return (<FormArray>this.itemsForm.get('conversions'));
  }

  get selectConversionRows() {
    return (<FormArray>this.selectConversionsForm.get('selectConversionRows'));
  }

}

Here's a Working Sample StackBlitz for your ref.


UPDATE:

Here's how you would do it in your code:

import { Component } from '@angular/core';
import { FormBuilder, FormArray, Validators, FormGroup } from '@angular/forms';

@Component({...})
export class AppComponent {

  itemsForm: FormGroup;
  selectConversionsForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.itemsForm = this.fb.group({
      name: [null, Validators.required],
      description: [null, Validators.required]
    });

    this.selectConversionsForm = this.fb.group({
      selectConversionRows: this.fb.array([])
    });
  }

  ngOnInit() {
    this.onCreateItem();
  }

  onCreateItem() {
    const conversions = [];

    (this.selectConversionsForm.get('selectConversionRows') as FormArray).getRawValue().forEach(item => {
      conversions.push({
        conversion_id: item['conversion_id'],
      });
    });

    this.itemsForm.addControl('conversions', this.fb.array(conversions.map(conv => this.fb.group({
      conversion_id: this.fb.control(conv.conversion_id)
    }))));
    console.log(this.itemsForm.value);
  }

}

PS: Do Read the Comments in the Code to understand more.

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

3 Comments

Please check this link stackblitz.com/edit/…
@Joseph, I've updated my answer and the stackblitz according to yours. Please have a look.
I'm sorry you lack something. I need to get the conversions array from selectConversionsForm's selectConversionRows and add it into the itemsForm

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.