Angular - Late Form Group initialization problem - not displaying proper values

Question

I'm struggling a little bit with forms in my project. I have a component to edit/create new offers, but the fields are taken async from the backend. For some reason, first few fields get default empty value, while the rest are correctly taken from the api. my ngOnInit:

    this.route.params.subscribe(
      (params: Params) => {
        this.id = params.id;
        this.edit = params.id != null;
        if (this.edit) {
          this.rentalService.fetchRentalById(this.id); // http request to get rental

          this.rentalService.rentalSelected.subscribe(
            rental => {
              this.editedRental = rental;
              console.log(this.editedRental); //console log shows all the data correctly
              this.initForm();
            }
          );

        } else {
          this.editedRental = new Rental();
          this.initForm();
        }
      }
    );

Also, for some reason, when i enter the page after browsing the page, only two first fields are missing, while when refreshing on the page, first 6 fields are missing.

my initForm():

  initForm() {
    this.offerForm = this.formBuilder.group({

      title: new FormControl(this.edit ? this.editedRental.title : '', [Validators.required]),
      location: new FormControl(this.edit ? this.editedRental.locationStr : '', [Validators.required]),
      price: new FormControl(this.edit ? this.editedRental.price : '', [Validators.required]),
      isNegotiable: new FormControl(this.edit ? this.editedRental.negotiable : '', [Validators.required]),
      deposit: new FormControl(this.edit ? this.editedRental.deposit : '', [Validators.required]),
      rooms: new FormControl(this.edit ? this.editedRental.rooms : '', [Validators.required]),
      floor: new FormControl(this.edit ? this.editedRental.floor : '', [Validators.required]),
      size: new FormControl(this.edit ? this.editedRental.size : '', [Validators.required]),
      buildDate: new FormControl(this.edit ? this.editedRental.buildYear : '', [Validators.required]),
      moveInFrom: new FormControl(this.edit ? this.editedRental.moveInFrom : '', [Validators.required]),
      description: new FormControl(this.edit ? this.editedRental.desc : '', [Validators.required]),
      tagInput: new FormControl('')
    });
}

Just to be sure my html isnt messed up, here is a snippet to show that fields name are correctly initialized:

 <div class="col-xl-10">
      <input type="text" class="form-control my-3"
             id="title" placeholder="Title.."
             formControlName="title">
 </div>

I'm not really a front-end guy, I can't spot the mistake, especially that the console.log() shows correct data before the call to initForm(), i'd appreciate some feedback

Answer 1

you're mixing FormGroup constructor and formBuilder, must be

//using new FormGroup
this.offerForm = new FormGroup({
      title: new FormControl(..)
      ...
})

Or

//using formBuilder
this.offerForm = this.formBuilder({
      title: [(this.edit ? this.editedRental.title : ''), [Validators.required]]
      ...
})