Angular Dynamic Addition of Fields

Question

Trying to add fields dynamically, but I keep getting this error. Can someone please point to me what is causing this. Link to stackblitz below.

Click Search ABC and the searched item gets added to the form below. This searched item ABC should be shown in the field.

ERROR Error: Cannot find control with path: 'items -> field2'
    at _throwError (shared.ts:140)
    at setUpControl (shared.ts:36)
    at FormGroupDirective.addControl (form_group_directive.ts:132)
    at FormControlName._setUpControl (form_control_name.ts:285)
    at FormControlName.ngOnChanges (form_control_name.ts:212)
    at checkAndUpdateDirectiveInline (provider.ts:207)
    at checkAndUpdateNodeInline (view.ts:429)
    at checkAndUpdateNode (view.ts:389)
    at debugCheckAndUpdateNode (services.ts:430)
    at debugCheckDirectivesFn (services.ts:391)

https://stackblitz.com/edit/angular-t36ees?file=src%2Fapp%2Fhello.component.ts

can you help me with a background of what you trying?

Aravind
– Aravind

2020-05-06 20:24:00 +00:00
Commented May 6, 2020 at 20:24 — Aravind
– Aravind, Commented May 6, 2020 at 20:24
@Aravind added more context

java_dude
– java_dude

2020-05-06 20:31:20 +00:00
Commented May 6, 2020 at 20:31 — java_dude
– java_dude, Commented May 6, 2020 at 20:31

bryan60 · Accepted Answer · 2020-05-06 20:45:10Z

2

you're gona wana do this in template:

<tbody formArrayName="items">
     <tr *ngFor="let item of items.controls; let i = index;" [formGroupName]="i">
          <td>{{ i + 1 }}</td>
          <td><input formControlName="field1" /></td>
          <td><input formControlName="field2" /></td>
          <td><input formControlName="field3" /></td>
     </tr>
</tbody>

you don't want to repeat your form array name directive for every row, so just stick it on the table body once, and you need to let angular know which index in the array it's accessing, you do that with the form group name directive, with the index as the name. this properly builds the path items -> 0 -> field2, whereas items -> field2 is an invalid path as it doesn't say which item in the array, and items has no property field2, it is an array of groups that have the property.

fixed blitz: https://stackblitz.com/edit/angular-3sgqqx?file=src/app/hello.component.ts

edited May 6, 2020 at 20:45

answered May 6, 2020 at 20:39

bryan60

29.5k5 gold badges56 silver badges71 bronze badges

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

4 Comments

java_dude Over a year ago

That makes sense. What if field is changed from Input field to Interpolation. {{ field1 }}. How will this work?

bryan60 Over a year ago

not sure what you mean. field1 is a string key for a form control. it doesn't have meaning outside of the form control context

java_dude Over a year ago

Its replacing second <td><input formControlName="field1" /></td> with <td>{{field1}}</td>. I get it as blank, hence asking.

bryan60 Over a year ago

yea {{field1}} is you telling it to interpolate the value of some property field1 on the component controller that doesn't exist. if you want the value of the control at the key field1 for the current group you could do.. {{ item.get('field1').value }} as item is referring to the current group in the array, so you're getting the field1 control and then the value

Collectives™ on Stack Overflow

Angular Dynamic Addition of Fields

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related