Reactive Forms value is null

Question

I am building a student system with spring boot and angular. When I want to update the contact information,I want the informtaion from the backend to be written to the necessary placesint he automatic form. My code part is like below bot it doennot write any value, although the backend part is full of data.

---

@GetMapping("/Person/{personId}")
public Person getPersonID(@PathVariable(value = "personId") Integer personId) {
  Person person = editorService.findBypersonId(personId);
  return person;
}

---

data: Person = new Person();

ngOnInit() {
  this.reloadData();
  this.reloadForm();
}
    
reloadData() {
  this.personService.getPErsonId(this.personId).subscribe(response => {
    this.data = response;
  });
}

reloadForm() {
  this.ilanOlusturForm = new FormGroup({
    personName: new FormControl(
      this.data ? this.data.personName : "", [Validators.required]
    ),
  });
}

export class Person{
  name:string;
  surname:string;
  ....
}


<nb-card>
    <nb-card-body>
        <nb-stepper #stepper>
            <nb-step [stepControl]="ilanOlusturForm" >

                <form [formGroup]="ilanOlusturForm" class="step-container">
                    <div class="row">
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label class="label">Personel</label>
                                <input type="text" nbInput fullWidth fieldSize="small"
                                    formControlName="personName">

                            </div>
                        </div>
                    </div>
                </form>
            </nb-step>
        </nb-stepper>
    </nb-card-body>
</nb-card>
                

---

  ngOnInit() {
  this.reloadData();
  
}

reloadData() {
  this.personService.getPErsonId(this.personId).subscribe(response => {
    this.data = response;
    
    // Move this line to here
    this.reloadForm();
    
  });
}

reloadForm() {
  this.ilanOlusturForm = new FormGroup({
    personName: new FormControl(this.data ? this.data.personName : "", [Validators.required]),
  });
}

Answer 1

You should move this.reloadForm(); to inside reloadData() .

 data: Person = new Person(); ngOnInit() { this.reloadData(); } reloadData() { this.personService.getPErsonId(this.personId).subscribe(response => { this.data = response; // Move this line to here this.reloadForm(); }); } reloadForm() { this.ilanOlusturForm = new FormGroup({ personName: new FormControl(this.data? this.data.personName: "", [Validators.required]), }); } export class Person { name: string; surname: string; .... }