Angular input form values only update after focus

I have an Angular app with this form named 'form' and this page also has another form in the same html called 'form' as well. The second form loads the row first values coming from the ngFor but the rest only load after I click inside the unloaded input. This might be because of the same name?

<div class="all">
  <div class="card card-rounded shadow-sm">
    <form [formGroup]="form">
      <div class="p-3">
        <div class="form-row">
          <div class="form-group col-md-12">
            <label>Tema</label>
            <input [ngClass]="cssValidator(f.theme)" class="form-control" formControlName="theme">
            <div *ngIf="f.theme.errors?.required && f.theme.touched" class="invalid-feedback">
              Obrigatório
            </div>          
            <div *ngIf="f.theme.errors?.maxlength" class="invalid-feedback">
              Máximo 50 letras
            </div>
          </div>
        </div>      
      </div>     
    </form>
  </div>

  <div class="card rounded shadow-sm mt-4" *ngIf="editMode">
    <div class="p-3">
      <div class="d-flex border-bottom">        
      </div>
      <div class="form-row p-1">
        <div [formGroup]="form" class="col">
          <div formArrayName="details" *ngFor="let detail of details.controls; let i = index">
            <fieldset [formGroupName]="i" class="form-group">          
              <div class="row">               
                <div class="form-group col-md-4">
                  <label>Preço</label>
                  <input [ngClass]="cssValidator(details.get(i+'.price'))" class="form-control" formControlName="price">
                </div>               
                <div class="form-group col-md-4">
                  <label>Descrição</label>
                  <input [ngClass]="cssValidator(details.get(i+'.description'))"
                    class="form-control" formControlName="description" placeholder="Descrição...">
                </div>
              </div>
            </fieldset>
            <hr>
          </div>
        </div>
      </div>     
    </div>   
  </div>
  <br>
</div>

The ts:

get f(): any {
    return this.form.controls;
  }

get details(): FormArray {
    return (this.form.get('details') as FormArray);
}

loadDetails() {
    this.detailService.getDetailsByEventId(this.eventId).subscribe(
      (detailsResult: Detail[]) => {
        detailsResult.forEach(detail => {
          this.details.push(this.createDetails(detail));
        });
      },
      (error: any) => {
        this.toastr.error('Erro ao tentar carregar detalhes', 'Erro!');
        console.log(error);
      }
    ).add(() => this.spinner.hide());
  }