Question: I have a form, and want to add default values to the form fields after shows up, so basically I have 2 function #1 for retrieving data from backend #2 display the form:

```
person$: any;

ngOnInit() {
  this.getPersonData(123)
  this.buildPersonForm()
}

getPersonData(id: number) {
   this.personService.getDetails(id)
     .subscribe((data) => {
       this.person$ = data
     }
}

buildPersonForm() {

  // Here I want to access this.person$.firstname

  console.log(this.person$.firstname) // undefined
  this.PersonForm = this.fb.group({
     firstname: [null, Validators.required],
  })
}

```

in html template if I use it as below it works:

```
<input matInput placeholder="Firstname" formControlName="firstname" value="{{person$?.firstname}}">

```

but I want to know how to access it inside component itself not in 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

```

Answer: 
Simply just call `buildPersonForm` on getPersonData observable complete

```
ngOnInit() {
  this.getPersonData(123);
}

getPersonData(id: number) {
   this.personService.getDetails(id)
     .subscribe((data) => {
        this.person$ = data
      },
     null,
      () => this.buildPersonForm()
    }

```

Another way just but `buildPersonForm` in the body of next method in subscribe

```
ngOnInit() {
  this.getPersonData(123);
}

getPersonData(id: number) {
   this.personService.getDetails(id)
     .subscribe((data) => {
       this.person$ = data;
       this.buildPersonForm();
     }
}

```

Last way you can use **async/await**

```
async ngOnInit() {
  this.person$ = await this.getPersonData(123).toPromise();
  this.buildPersonForm();
}

```
FormControl will take the default value in the first item to the array as described below.

For this we can use **async/await**.

```
async ngOnInit() {
    this.person$ = await this.personService.getDetails(id).toPromise();
    this.buildPersonForm();
}

```

And then we can set the value to the FormControl in the "**buildPersonForm()**" method.

```
this.PersonForm = this.fb.group({
    firstname: [this.person$.firstname, Validators.required],
})

```

and the in the html the **value** binding in not required, if you have added "**formControlName**" as described.

```
<input matInput placeholder="Firstname" formControlName="firstname">

```