After binding a formControlName, how can I use it inside the html?

Issue

The section of my html in question currently is this

<div class="psi-list">
          <div class="flex-row" *ngFor="let item of psiList; index as i">
            <p class="row-psi">{{ item.psi }}</p>
            <button class="icon-btn" (click)="deletePsi(item.psi)"><i class="cil-trash"></i></button>
            <button class="icon-btn" (click)="item.toggle = !item.toggle"><i class="cil-pen-alt"></i></button>
            <form [formGroup]="psiEditForm" id="psi-edit-form" class="form-horizontal" [hidden]="!item.toggle">
              <input class="psi-input" type="text" placeholder="Update PSI here..." [(ngModel)]="psiEdit"
                     [ngClass]="{'is-valid': !checkControlValidation(psiEditForm.controls.psi) && psiEditForm.controls.psi.touched, 'is-invalid': checkControlValidation(psiEditForm.controls.psi)}"
                     (keydown.enter)="!psiEditForm.controls.psi.invalid ? editPsi(item.psi) : clearPsiEdit()" formControlName="psi" />
              <div class="help-block validation-warning" *ngIf="checkControlValidation(psiEditForm.controls.psi)"><i class="fa fa-exclamation fa-lg"></i>Please Enter a Valid 2 Letter PSI</div>
            </form>
          </div>
        </div>

I pass the control to the checkControlValidation method in the .ts file using the formControlName 'psi'. However, this causes an issue in the functionality. Whenever I type in one input box, it types it into all of the input boxes within the *ngFor.

When I change the form control name to this -

[formControlName]="item.psi"

It binds the name to the item it relates to, so in theory I can pass this to fix my issue. However, when I change all instances of psiEditForm.controls.psi to psiEditForm.controls.item.psi, I get lots of TS2339 errors.

Any ideas how I can use this? Sorry I know this is probably horribly worded

Solution

You are mixing the two form concepts in Angular.

There is template driven (ngModel) and reactive (formGroup, formControl, formArray ...)

If you have to loop over controls, your form must be a form array, and you iterate over its controls property.

If this is a single control, then children are form controls, and you can use [formControl] instead of formControlName.

If there are multiple controls per form array, then children are form groups, and contain form controls.

Since I do not use template driven, I cannot explain it to you without making mistakes, so I will refrain from it.

But the point is, use either, not both !

Answered By - MGX