Dynamic form input value not hydrated on first submit

I have a form made up of n inputs :

    <form class="new-user" [formGroup]="customFields">
      <div *ngFor="let customField of customer['customFields']; let i = index">
          <div *ngIf="isEditing(i)" [@phaseAndSlideLeftAnimation] class="cusomer-property">
              <mat-form-field>
                <mat-label i18n="getFormKey(customField)"></mat-label>
                <input
                  ...
                  (keyup.enter)="finalizeEdit(customField, getFormKey(customField))"
                  (keyup.esc)="cancelEdit(customField)">
                <mat-hint align="end">/</mat-hint>
              </mat-form-field>
          </div>
          <div *ngIf="isNotEditing(i)" [@phaseAndSlideLeftAnimation] class="cusomer-property pointer" (click)="viewEdit(customField)">
              <div></div>
              <div></div>
        </div>
      </div>
    </form>

The bug I'm having is that the first of the fields I click on (that then switches to a mat-forms input via the *ngIf) does not have a hydrated field (yet).

Ergo in my pseudo-submit function :

  finalizeEdit(customField, key){
    console.log(this.customFields['value'][key]);
    customField['value'] = this.customFields['value'][key];
    this.popCustomFields.next(this.customer);
    this.closeEdit(customField); 
  }

this.customFields['value'][key] (read:this.customFields.value.myinput), returns undefined.

...

But If I click and open a second "custom field" or input, all of my inputs now all my values are correctly instantiated in the form and up to speed.

This for, some reason, is for ALL the fields of the form.

You'd think that it's one of those *ngIf-related issues but apparently not : If I reveal one field, then reveal another. Both of them are now ready and every field after that.

So the bug only happens on first "input-ngIf-reveal" after the view is loaded.

I then I found this : https://codecraft.tv/courses/angular/forms/submitting-and-resetting/

And found out that you can do this :

<form (ngSubmit)="onSubmit()">
  .
  .
  .
</form>

The hope is that this function when fired would recieve correctly hydrates values even on first submit...

Since In my case I don't care that the submit is fired over the whole form, this could work for me.

Here's my quandary :

To use this, given that I want to pass customField as an argument to finalizeEdit(), I'd need to put the start and end of the <form> tags in the DOM, inside the *ngFor in order to be able to pass it the variables the submit needs.

The problem is this would result in n Forms of 1 input instead 1 Form of n inputs and undermining the whole code behind forms.

I feel like that would making my code worse.

Plus I'd have to resort to extracting each Forms to a component to correctly initialize the forms.

All this without a guarantee that this would solve my "first-click" bug.

Ideally I'd be able to put the (ngSubmit)="onSubmit()" on <input> instead of on <form> but I tried that and it isn't an available method.

And in anycase I suspect form's onSubmit is not the solution to my ills. why aren't my input fields instantiated on first try?

from Dynamic form input value not hydrated on first submit