I have a form with default values that should be added to the form fields when it appears. There are two functions: #1 for fetching data from the backend and #2 for displaying the form:
person$: any;
ngOnInit() {
this.getPersonData(123)
this.buildPersonForm()
}
getPersonData(id: number) {
this.personService.getDetails(id)
.subscribe((data) => {
this.person$ = data
}
}
buildPersonForm() {
// I need to access this.person$.firstname here
console.log(this.person$.firstname) // returns undefined
this.PersonForm = this.fb.group({
firstname: [null, Validators.required],
})
}
If I use the following code in the HTML template, it works:
<input matInput placeholder="Firstname" formControlName="firstname" value="{{person$?.firstname}}">
However, I want to know how to access it inside the component itself, not just in the HTML template.
Angular CLI: 7.0.2
Node: 10.12.0
OS: darwin x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.10.2
@angular-devkit/core 7.0.2
@angular-devkit/schematics 7.0.2
@schematics/angular 7.0.2
@schematics/update 0.10.2
rxjs 6.3.3
typescript 3.1.3