Add template reference variable for FormArrays

One can self-reference forms as so:

<form #thisForm="ngForm">
  Yay I can see myself: {{  thisForm.value | json }}
</form>

However, there is no way to refer to FormArrays within the form. Thusly, we’re forced to do something like this:

<div formArrayName="sadArray">
   <li *ngFor="let control of getFormControlsWithBurdensomeCode("saddAray"); let i=index">
       <input [formControlName]="i">
   </li>
</div>

// => ERROR: typo in your second reference to "sadArray", and now your app is broken. 
// (I hope you didn't  accidentally refer to a *different* FormArray; that's even worse!)
// =>  PAIN_IN_BUTT: You had to write code for fetching FormArray controls.

Now imagine the beauty of using a template reference variable:

<div formArrayName="happyArray" #thisArray="INSERT_FORM_ARRAY_DIRECTIVE_REFERENCE">
   <li *ngFor="let control of thisArray.controls; let i=index">
       <input [formControlName]="i">
   </li>
</div>

// => Success: Your app worked perfectly. Little code, no typos. Way to go!

Benefits of template reference variables for FormArrays:

• IDE’s treat #templateVariables as typed variables, so they will help you out accordingly. Whereas “sadArray” was just a string, so you get no help, and you’re vulnerable to typos and bugs.
• getFormControlsWithBurdensomeCode(“yourFormArraylName”) is no longer necessary.

[Totati]

We use this approach It’s almost the same, but we enforce the type in the *ngFor

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}