CODEWITHSUNDEEP
angularspring-bootangular-reactive-forms
zdnmn
zdnmn

Reputation: 161

Reactive Forms value is null

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]),
  });
}

enter image description here

Upvotes: 0

Views: 1234

Answers (1)

Tuan Dao
Tuan Dao

Reputation: 2805

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;
  ....

}

Upvotes: 1

Related Questions