10

I have this form group:

this.form = fb.group({
  'teacher': [''],
  'schools': fb.array([
    fb.group({
      'school_name': [''],
      'school_description': [''],
    })
  }) 
});

The question is:

How can I add a new form control (named school_city) to a specific *group" of FormArray programatically through a function?

anonymous
  • 1,499
  • 2
  • 18
  • 39
  • Do you want to add a new `group` to the `schools` *array*? Is this? – developer033 Jun 11 '17 at 21:53
  • I want to add a control named school_city in the group that is inside the schools array. – anonymous Jun 11 '17 at 21:56
  • And what's the problem? Why it doesn't work? Isn't it simply put `school_city` as you did for `school_name` and others? – developer033 Jun 11 '17 at 21:57
  • I want to add it through a function call. – anonymous Jun 11 '17 at 22:01
  • Hmm, since you're in array you may want to add this control for every group of schools? Also, the question is lack of information. It would be useful if you can you include these comments in your question. – developer033 Jun 11 '17 at 22:04
  • that could also help: https://stackoverflow.com/questions/55334283/reactive-forms-how-to-add-new-formgroup-or-formarray-into-an-existing-formgroup –  Mar 25 '19 at 12:00

1 Answers1

19

To add some control to every group inside FormArray, you can do the following:

someFunc() {
  const formArr = this.form.get('schools') as FormArray;

  for (const group of formArr.controls) {
    group.addControl('school_city', this.fb.control(''));
  }
}

PLUNKER

Edit#1:

As the OP now explains that he wants to add the control to a specific group:

You have to pass the index of the group that you want to add the control:

someFunc(idx: number) {
  const group = this.form.get(`schools.${idx}`) as FormGroup;

  group.addControl('school_city', this.fb.control(''));
}
developer033
  • 24,267
  • 8
  • 82
  • 108
  • sorry this dint solve my problem.how can i add the control school_city, only when you click add school city button? Right now every group is added with the control school_city. I actually dont want to be like this. – anonymous Jun 12 '17 at 10:54
  • @kartik dude, yesterday you confirmed that you want to add it to every control (you can see what I asked in comments of your post). Anyway, it's too easy to accomplish, see the edit version. – developer033 Jun 12 '17 at 11:03
  • Also, is there any reason to remove the upvote and accepted answer? – developer033 Jun 12 '17 at 11:07
  • hi man, actually i want to add formcontrol only for a specific group(based on condition). if you want i can share my code – anonymous Jun 12 '17 at 11:07
  • ya i dint specify what i want. you assumed that it should be added for every group of array. I thought i can actually make it with your solution. but i'am unable to do it. i upvoted again. tnx for your effort. – anonymous Jun 12 '17 at 11:12
  • i added this line const group: FormGroup = this.form.get(`schools.${idx}`); .The editor is complaining that type abstractcontrol is not assignable to type formgroup. – anonymous Jun 12 '17 at 11:26
  • It's just a type cast.. add `as FormGroup` in the end (as I did in my answer). – developer033 Jun 12 '17 at 11:28
  • Why do we add this as formgroup? Is this not a formarray? – anonymous Jun 12 '17 at 20:40
  • `schools` is a `FormArray`, `schools` at a specific index is a `FormGroup`. – developer033 Jun 12 '17 at 22:35
  • may be you can answer the below question, https://stackoverflow.com/questions/65429846/loop-through-nested-formgroup-and-change-each-form-control-value-to-null-if-it-h – anonymous Dec 23 '20 at 19:29