Not able to set default value of input (Angular) - html

Question

I have a web page that uses angular form. This page is basically a user data so it shows the name, phone, mail, etc of the user.The data are obtained using a mongoDB database. I want it to show by default the value already set in placeholder and I want for the user to be possible to change it as well. If they don't type anything in the field then the value that should be passed is the placeholder. For example the value {{this.cliente.nome}} when it is in a different field than the input one but when I try to use it as default value of input it doesn't work. It says "Cannot read property 'nome' of undefined" when the other one works. The data comes correct from the mongoDB but it isn't working. This is my code:
import { Component, OnInit } from '#angular/core';
import { UserService } from '../user.service';
import { User } from 'src/user';
import { FormGroup, FormControl, FormArray, FormBuilder } from "#angular/forms";
import { Router } from '#angular/router';
#Component({
selector: 'app-cliente-dados',
templateUrl: './cliente-dados.component.html',
styleUrls: ['./cliente-dados.component.css']
})
export class ClienteDadosComponent implements OnInit {
cliente: User;
updateForm: FormGroup;
constructor(
private userService: UserService,
private formBuilder: FormBuilder,
public router: Router
) {
this.updateForm = this.formBuilder.group({
nomeUpdate: this.formBuilder.control("")
})
}
ngOnInit(): void {
this.getCliente();
}
getCliente(){
this.userService.getUser(localStorage.getItem('userAtual')).subscribe(user => {
this.cliente = user[0];
});
}
updateCliente(updateData){
console.log("update");
}
}
<form [formGroup]="updateForm" (ngSubmit)="updateCliente(updateForm.value)">
<div class="data">
<img id="iconePerfil" src="assets/Imagens/Icones/perfil.png">
<div id="informacaoRegisto">
<div class="container">
<label id="nome"><strong>{{this.cliente.nome}} <!--This one shows the value--></strong></label>
<input class="input" type=" text " [(value)]="this.cliente.nome" formControlName="nomeUpdate"> <!--Here the value isn't shown-->
<span class="border"></span>
</div>
</div>
</div>
<button type="submit" class="submit">Atualizar Dados</button>
</form>
Representation of the issue: top and bottom values are shown(not input field)
Middle one not shown(input field with default value)

Answer 1

You are using FormBuilder and as such the value property of input is not used. The initial value is initialized by the FormControl
Remove the following from the constructor
this.updateForm = this.formBuilder.group({
nomeUpdate: this.formBuilder.control("")
})
Modify getCliente()
getCliente(){
this.userService.getUser(localStorage.getItem('userAtual'))
.pipe(first()).subscribe(user => {
this.cliente = user[0];
this.updateForm = this.formBuilder.group({
nomeUpdate: this.formBuilder.control(this.cliente.nome)
})
});
}
Have added .pipe(first()) so only first value received is used.
Hope it helps!