I have retrieved data from the database and would like to pre-set an update form with preset values. The values are preset when the FormControlName is not set in the input field the interpolation works. Once FormControlName is added it removes it. I have tried setValue and patchValue none have worked. Any suggestions of why this would be or a potential solution? thanks in advance
ngOnInit() {
this.currUserId = this.userId$.value;
this.authService
.findOne(this.currUserId)
.pipe(map((user: User) => (this.currentUser = user)))
.subscribe();
}
<div class="tab-container" *ngIf="currentUser">
<form [formGroup]="accountForm" (ngSubmit)="submit()">
<ion-card class="personal-form">
<h3>Personal Details</h3>
<div class="form-input">
<label>FirstName</label>
<input
formControlName="firstName"
type="text"
value="{{currentUser.firstName }}"
/>
</div>
<div class="form-input">
<label>surname</label>
<input
formControlName="surname"
type="text"
value="{{ currentUser.surname }}"
/>
</div>
</form>
</div>
Instead of passing value in the input element, use "formBuilder".
constructor(
...
private _fb: FormBuilder,
){}
ngOnInit() {
this.accountForm = this._fb.group({
firstName: [''],
surname: [''],
});
this.getCurrentUser();
}
getCurrentUser() {
this.currUserId = this.userId$.value;
this.authService
.findOne(this.currUserId)
.subscribe((user: User) => {
this.currentUser = user;
this.accountForm.patchValue(this.currentUser);
});
}
}
and remove both value="{{currentUser.firstName }}" form HTML.