Hello, Im new to angular and im currently working on an account editing page, i used the formgroup and formcontrol imports to setup the initialisation for my form, as seen here:

editGroup = new FormGroup({
    fullname: new FormControl(this.currentUser.fullname),
    phone: new FormControl(),
    email: new FormControl(),
    country: new FormControl(),
    city: new FormControl(),
  });

currentUser loads the user who's id was selected in the earlier page (it works fine as the user shows up in console log)

 ngOnInit(): void {
    const db = getDatabase();
    const uid = this.aroute.snapshot.params['uid'];
    const Ref = ref(db, 'users/' + uid);
    onValue(Ref, (snapshot) => {
      this.currentUser = snapshot.val();
      console.log(this.currentUser);
    });
  }

and this is the form im working on

<form [formGroup]="editGroup" (ngSubmit)="this.modifyUser(editGroup.value)">
  <div class="row mt-2">
    <div class="col-md-12">
      <label class="labels">Full Name</label
      ><input
        formControlName="fullname"
        type="text"
        id="fullnameview"
        name="fullname"
        class="form-control"
        placeholder="Full Name"
      />
    </div>
    <div class="col-md-12">
      <label class="labels">Phone Number</label
      ><input
        formControlName="phone"
        type="text"
        id="phone"
        name="phone"
        class="form-control"
        placeholder="Phone Number"
        [value]="this.currentUser.phone"
      />
    </div>
    <div class="col-md-12">
      <label class="labels">Email</label
      ><input
        formControlName="email"
        type="email"
        id="email"
        name="email"
        class="form-control disabled"
        placeholder="email"
        [value]="this.currentUser.email"
      />
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-md-6">
      <label class="labels">Country</label
      ><input
        formControlName="country"
        type="text"
        class="form-control"
        id="country"
        name="country"
        placeholder="Country"
        [value]="this.currentUser.country"
      />
    </div>
    <div class="col-md-6">
      <label class="labels">City/State</label
      ><input
        type="city"
        class="form-control"
        id="city"
        name="city"
        placeholder="City / State"
        [value]="this.currentUser.city"
      />
    </div>
  </div>
  <div class="mt-5 text-center">
    <button class="btn btn-primary" type="submit">Submit Changes</button>
  </div>
  <div class="mt-5 text-center">
    <button
      class="btn btn-danger delete-button"
      type="button"
      (click)="this.deleteme()"
    >
      Delete Account
    </button>
  </div>
</form>

i tried adding a variable after the initialisation of the current user at the end of igoninit and added it to the form as a ngIf but it didnt change anything. i also tried loading the values like this

fullname: new FormControl(${this.currentUser.fullname}), but it returns 'undefined'

i've also tried to add the value through the html element either through

[value]="this.currentUser.fullname" or value={{this.currentUser.fullname}} but the data only shows up when i refresh the page, i want it to show up the second i click on a user and the router redirects me to his editing page.

Is this even possible? let me know please :)