Reactive Forms 值为空

Question

我正在构建一个带有 spring 引导和 angular 的学生系统。当我想更新联系人信息时，我希望将后台的信息写入自动表单中的必要位置。我的代码部分就像下面的机器人它不写任何值，虽然后端部分充满了数据。

@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

您应该将 this.reloadForm(); 移动到 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;
  ....

}

Reactive Forms 值为空

Reactive Forms value is null

spring-boot

angular

angular-reactive-forms