NgxFormWithArrayControls access formControlName ?

[elvispdosreis]

I have a component created with NgxFormWithArrayControls and I need in ngfor to access the form control name

the examples that I have seen and transform the input into another form component to do this, but it is so simple that there is no need to transform it into a component

<ul>
	<li *ngFor="let user of formGroupControls.users; let i = index;">
		<input formControlName="user.name">
	</li>
</ul>

[maxime1992]

Hi @elvispdosreis

is there a question here?

[elvispdosreis]

Hi @elvispdosreis

is there a question here?

Yes

[maxime1992]

The reason you have to create a new component is because ngx-sub-form is not aware of your nested data.

The good thing about nested forms (and behind the scenes ControlValueAccessor) is that it lets us deal with only the first layer of an object and we can either use that as it is (an object) or delegate the breakdown of this object to another sub form.

Otherwise, your idea of sub forms would be broken and we'd have to deal with loads of data in 1 component.

So from there, you have 2 options:

• Either use another sub form which you don't seem to want as you'd have to create a sub form for apparently only 1 property
• Use the remap function of ngx-sub-form to put the user name at the first level of your current form

Please read the doc for the second solution first. If that doesn't make sense I'm happy to help if you provide first a minimal reproduction on stackblitz

[elvispdosreis]

I need to edit the component in the table to access it with <input [formControlName]="compartment.size">
sample

[maxime1992]

Can you explain a bit more in details what I am supposed to look at in your stackblitz please? For example, explain what the current state is, what is not working and/or what you'd like to do

[elvispdosreis]

I would like to link this grid to the form

[maxime1992]

@elvispdosreis you cannot do

	<tbody>
		<tr *ngFor="let compartment of formGroupControls.compartments.controls; let i = index;">
			<td>{{i}}</td>
			<td>{{compartment.value.deck}}</td>
			<td><input [formControlName]="compartment.size"></td> <--------------- this

Compartment is a FormControl. Remember how you created it?

By calling addCompartment which itself calls createFormArrayControl which itself does:

      case "compartments":
        return new FormControl(value, [Validators.required]);

So when you do *ngFor="let compartment of formGroupControls.compartments.controls; let i = index;" the compartment variable is a FormControl. And a FormControl doesn't have a size property (or at least not the one you'd expect). BUT, it holds a value (which here is an object containing a deck and a size property).

To allow the modification of the value property you need to create a sub form and pass this whole FormControl then allow only to edit the size property from there.

I've made you an example here:

https://stackblitz.com/edit/ngx-sub-form-array-remap-yuz193?file=src%2Fapp%2Fspaceship-container%2Fspaceship-form%2Fspaceship-config-form%2Fcompartments-form%2Fspaceship-compartments-form.component.html

Note: While the value is binded correctly initially, note that if you update the value from the table, it won't update the value in the form above :/ But I believe that you're not hitting a limitation from ngx-sub-form but rather angular itself: angular/angular#13792

I've also commented on this issue with a minimal repro: angular/angular#13792 (comment)

I believe this is the same limitation in this case.

I'm going to close this as everything has been answered, feel free to reopen if it doesn't :)