First always empty input in Formgroup

Question

The first input of the form does not load the value from the indexedDB, nor does it carry a new value typed for recording in the database.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { FormBuilder } from '@angular/forms';

import { ConnectionFactory } from 'src/app/core/connection/connection.service';
import { ClientesDAO } from 'src/app/core/dao/clientesDao';

@Component({
    templateUrl: 'cadastroClientes.component.html'
})
export class CadastroClientesComponent implements OnInit {

    clienteId;
    tituloPagina;
    clientesDAO;
    clienteForm;

    constructor(
        private activatedRoute: ActivatedRoute,
        private formBuilder: FormBuilder
    ) { }

    ngOnInit() {
        this.clienteId = parseInt(this.activatedRoute.snapshot.params.clienteId);

        this.tituloPagina = this.clienteId ? 'Alterar Cliente' : 'Novo Cliente';

        ConnectionFactory.getConnection()
            .then(connection => this.clientesDAO = new ClientesDAO(connection))
            .then(this.carregaCliente.bind(this))
            .then(this.carregaForm.bind(this));
    }

    carregaCliente() {
        if (this.clienteId)
            return this.clientesDAO.select(this.clienteId);

        return { nomeFantasia: '', cnpj: '', telefone: '' };
    }

    carregaForm(cliente) {
        this.clienteForm = this.formBuilder.group({
            nomeFantasia: [cliente.nomeFantasia],
            cnpj: [cliente.cnpj],
            telefone: [cliente.telefone]
        })
    }

    salvar() {
        const cliente = {
            id: (this.clienteId ? this.clienteId : this.clientesDAO.AUTO_INCREMENT),
            nomeFantasia: this.clienteForm.value.nomeFantasia,
            cnpj: this.clienteForm.value.cnpj,
            telefone: this.clienteForm.value.telefone
        };

        this.clientesDAO.save(cliente)
            .then(cliente => {
                !this.clienteId &&
                    this.clienteForm.reset();
                alert(`Cliente ${cliente.id} - ${cliente.nomeFantasia} salvo.`);
            });
    }

}

---

<h2 class="bd-title" [textContent]="tituloPagina"></h2>

<form [formGroup]="clienteForm" (ngSubmit)="salvar()">
    <div class="form-group">
        <input type="text" class="form-control" formControlName="nomeFantasia" aria-describedby="Nome Fantasia"
            placeholder="Nome Fantasia">
    </div>
    <div class="form-group">
        <input type="text" class="form-control" formControlName="cnpj" aria-describedby="CNPJ" placeholder="CNPJ">
    </div>
    <div class="form-group">
        <input type="text" class="form-control" formControlName="telefone" aria-describedby="Telefone" placeholder="Telefone">
    </div>
    <button type="submit" class="btn btn-primary float-right ml-1">Salvar</button>
    &nbsp;
    <button type="button" class="btn btn-secondary float-right" [routerLink]="['/clientes']">Voltar</button>
</form>

---

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';

import { CadastroClientesComponent } from './cadastro/cadastroClientes.component';
import { listaClientesComponent } from './lista/listaClientes.component';

@NgModule({
    declarations: [
        CadastroClientesComponent,
        listaClientesComponent
    ],
    imports: [
        CommonModule,
        RouterModule,
        ReactiveFormsModule
    ]
})
export class ClientesModule { }

Answer 1

The problem is that formGroup is undefined until its answer. Either you use ngIf or initialize the empty form in init.

<form *ngIf="formGroup" [formGroup]="clienteForm" (ngSubmit)="salvar()">