Angular 8 | How to fill a form from one component to another?

I'm trying to populate this form from one component to another.

I created a object of inserimento.component.ts inside the home.component.ts. Any function I call of InserimentoComponent inside HomeComponent works. For example the console.log works fine, but when I try to set the form values they don't graphically appear.

From debug, however, the values are passed correctly. Also, if instead of

this.formInserimento.controls['matricola'].setValue(this.inserimento.matricola);

I use

(document.getElementById('matricola') as HTMLInputElement).value = this.inserimento.matricola

it works properly.

However, with the setValue I can't get it to work. What am I doing wrong?

Can anyone give me some tips? I've been looking for a solution for hours.
Thanks to whoever will answer!

My home.component.ts

export class HomeComponent implements OnInit {
  public inserimentoComponent: InserimentoComponent;
  
  constructor(private channelService: ChannelService,
    private flowService: FlowService,
    private router: Router,
    private wizardService: WizardService, public fb: FormBuilder) {
  }

  ngOnInit() {
    this.inserimentoComponent = new InserimentoComponent(this.wizardService, this.flowService, this.fb);

    this.inserimentoComponent.formInserimento = this.fb.group({
      matricola: new FormControl('', Validators.required),
      name: new FormControl('', Validators.required),
    })
 
  }


  goToInserimento(id: any): void {
    this.router.navigate(['/wizard']);

    const delay = new Promise(resolve => setTimeout(resolve, 500));
    delay.then(() => {
      const linkElement = document.querySelector('a[routerLink="inserimento"]') as HTMLElement;
      if (linkElement) {
        linkElement.click();
      }
    });
    delay.then(() => {
      this.inserimentoComponent.getInserimentoById(id)
    });
  }

}

My inserimento.component.ts

export class InserimentoComponent implements OnInit {

  //Inizializza il form
  public formInserimento: FormGroup;

  constructor
    (private wizardService: WizardService,
      private flowService: FlowService,
      public fb: FormBuilder) {
    this.formInserimento = this.fb.group({
      matricola: new FormControl('', Validators.required),
      name: new FormControl('', Validators.required),

    })

  }


  getInserimentoById(id) {
    console.log(id) //it works
    this.wizardService.getInserimentoById(id).subscribe(response => {
      this.inserimento = response.result; //it works
      console.log(response.result)
      if (response.result != null) { //it works

        this.formInserimento.controls['matricola'].setValue(this.inserimento.matricola); //it doesn't work
        this.formInserimento.controls['name'].setValue(this.inserimento.name); //it doesn't work

    });

  }

}

With Reactive Forms you can use .patchValue() for setting the value on form controls

this.formInserimento.patchValue({
  matricola: this.inserimento.matricola,
  name: this.inserimento.name,
})

Update value and validity after patching the values

this.formInserimento.controls['matricola'].updateValueAndValidity();
this.formInserimento.controls['name'].updateValueAndValidity();

Or, you can also use -

this.formInserimento.controls['matricola'].updateValue(this.inserimento.matricola);
this.formInserimento.controls['name'].updateValue(this.inserimento.name);

As you are using Reactive Forms, you can use .patchValue() on the reactive form's control:

this.formInserimento.get('matricola').patchValue(this.inserimento.matricola);
this.formInserimento.get('name').patchValue(this.inserimento.name);