Issue with setting form input values

[deep yoke]

So I have a form that is being used to collect information on a student. This information is then presented to the user and the user is given an option to edit the information. I want to then fill the form with all the values of that student and then give the user the option to edit it.

name: string = '';
  roll_no: any = '';
  state: string = '';
  city: string = '';
  pincode: any = '';
  dob: string = '';
  address1: string = '';
  address2: string = '';
  country: string = '';
  department: string = '';
  phone: any = '';

  ngOnInit(): void {
    this.editStudentService.studentToBeEdited.subscribe((student) => {
      this.studentToBeEdited = student;
      if (this.studentToBeEdited) {
        // Populate form fields with data from studentToBeEdited
        this.name = this.studentToBeEdited.name;
        this.roll_no = this.studentToBeEdited.roll_no;
        this.state = this.studentToBeEdited.state;
        this.city = this.studentToBeEdited.city;
        this.pincode = this.studentToBeEdited.pincode;
        this.dob = this.studentToBeEdited.dob;
        this.address1 = this.studentToBeEdited.address1;
        this.address2 = this.studentToBeEdited.address2;
        this.country = this.studentToBeEdited.country;
        this.department = this.studentToBeEdited.department;
        this.phone = this.studentToBeEdited.phone;
      }
      console.log(this.studentToBeEdited);
    });
  }

this is the relevent code in the form component the data is fetched from a service. I used the console.log to verify that the student information is actually being fetched and it is accurately being fetched.
the various variables like name, roll_no etc have all been implemented using a 2 way data binding in the html template.
Here is how I've done that it is the same for all the inputs

<input type="text" id="name" required name="name" [(ngModel)]="name" />

The issue is that the form elements are not being filled with the data why is that happening?

[oblique sky]

You probably have an error in the console of your browser.
Also, hint, instead of copying all the properties on the component, you could simply do

student: Student | undefined;
ngOnInit(): void {
    this.editStudentService.studentToBeEdited.subscribe(s => this.student = s);
}

and

<form *ngIf="student">
  ...
  <input type="text" id="name" required name="name" [(ngModel)]="student.name" />
  ...
</form>

[deep yoke]

Hi, I dont have any errors in the console. Im struggling to figure out what is causing this issue

the console just has the log that I have included and is displaying the appropriate student object

[oblique sky]

Then post a complete minimal reproduction as a stackblitz, as explained in #how-to-get-help

You could also post the exact and complete output of the console.log.

[deep yoke]

alright I will get back to you with this

thanks for taking the time to help

this is my list of students

when clicking on the edit button I am redirected to this page

the console.log provides an object with all the details of the student whos name I have clicked on

hope this helps

@oblique sky