Angular - How to automaticly fill a form by Id

Question

I would like to fill a form by Id with Angular FormBuilder. My problem is that I don't now how to do it and i've try many of the topics solutions, but nothing really helps. here is what i want : when i click on a button update, another page opens with some fields that match, and thoose fields have to be filled. The parent component is working and is sending an Id via a router navigate. But the component that should catch and made the view working isn't working at all. Here is the code of that component :

import { Component, OnInit, OnDestroy, Input } from '@angular/core';
import { Subject } from 'rxjs';
import { Site } from '@shared/models/site.model';
import { MessagesService } from '@core/messages/messages.service';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
import { BmrGenerationService } from './bmr-generation.service';
import { SiteService } from '@shared/services/site.service';
import { takeUntil } from 'rxjs/operators';
import { MmrService } from '@components/mmr/mmr.service';
import { Mmr } from '@shared/models/mmr.model';


@Component({
  selector: 'idea-bmr-generation',
  templateUrl: './bmr-generation.component.html',
  styleUrls: ['./bmr-generation.component.scss']
})
export class BmrGenerationComponent implements OnInit, OnDestroy {

  private unsubscribe$ = new Subject();
  settings: any;

  siteSelected: Site;

  constructor(
    private fb: FormBuilder,
    private messageService: MessagesService,
    private bmrGenerationService: BmrGenerationService,
    private siteService: SiteService,

  ) { }

  form: FormGroup;
  isFormModified = false;
  items: FormArray;


  ngOnInit() {
    this.createForm();
    this.listenerForm();
        // Lors d'un changement de site
        this.siteService.currentSite$.pipe(takeUntil(this.unsubscribe$)).subscribe(
          (site) => {
            if (site) {
              this.siteSelected = site;
              this.getSettingsSite(site.id);
            }
          });
  }

  ngOnDestroy() {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }

  getSettingsSite(idSite: number): void {
    /*this.adminSiteService.getSettingsBySite(idSite).subscribe((settings) => {
      this.settings = settings;
    this.createForm();
    this.listenerForm();
    });
  }*/

}


createForm() {
  this.form = this.fb.group({
    productCode: [{ value: null, disabled: false }],
    userReference: [{ value: null, disabled: false }],
    productDescription: [{ value: null, disabled: false }],
  });
}

listenerForm() {
  if (this.form) {
    this.form.valueChanges.subscribe(() => {
      this.isFormModified = true;
    });
  }
}

onSubmit() {
  if (this.isFormModified) {
    this.isFormModified = false;
    this.messageService.showSuccess('GENERATION_VERIF');
  }
}

onCancel() {
  if (this.isFormModified) {
    this.createForm();
    this.listenerForm();
    this.isFormModified = false;
  }
}

}

For example, i do't know how to replace the "null" values with the matching values. And i don't know how to get the Id in this component.

Here is the template :

  <idea-section-container>
  <div title>
    <fa-icon icon="cogs"></fa-icon> &nbsp;
    {{'BMR.GENERATION.TITLE' | translate}}
  </div>

  <div body>
    <div class="site-container">
      <form *ngIf="form" [formGroup]="form" (ngSubmit)="onSubmit()" class="site-form">

        <div class="site-form-line">
          <div class="site-form-label">
            <div>
              <fa-icon icon="info-circle" tooltipPosition="bottom" tooltipStyleClass="site-tooltip"
                pTooltip="Code du produit OF">
              </fa-icon>
            </div>
            <span>
              {{'BMR.GENERATION.PRODUCT-CODE' | translate}}
            </span>
          </div>
          <mat-form-field class="site-form-field" appearance="outline">
            <mat-label>{{'BMR.GENERATION.PRODUCT-CODE' | translate}}</mat-label>
            <input matInput formControlName="productCode">
          </mat-form-field>
        </div>

        <div class="site-form-line">
          <div class="site-form-label">
            <div>
              <fa-icon icon="info-circle" tooltipPosition="bottom" tooltipStyleClass="site-tooltip"
                pTooltip="référence du MMR">
              </fa-icon>
            </div>
            <span>
              {{'BMR.GENERATION.MMR_REF' | translate}}
            </span>
          </div>
          <mat-form-field class="site-form-field" appearance="outline">
            <mat-label>{{'BMR.GENERATION.MMR_REF' | translate}}</mat-label>
            <input matInput formControlName="mmrReference">
          </mat-form-field>
        </div>

        <div class="site-form-line">
          <div class="site-form-label">
            <div>
              <fa-icon icon="info-circle" tooltipPosition="bottom" tooltipStyleClass="site-tooltip"
                pTooltip="Description du produit">
              </fa-icon>
            </div>
            <span>
              {{'BMR.GENERATION.PRODUCT_DESCRIPTION' | translate}}
            </span>
          </div>
          <mat-form-field class="site-form-field" appearance="outline">
            <mat-label>{{'BMR.GENERATION.PRODUCT_DESCRIPTION' | translate}}</mat-label>
            <input matInput formControlName="productDescription">
          </mat-form-field>
        </div>

        <div class="margin-top20 site-form-footer">
          <idea-button type="submit" color="principal-blue" [disabled]="!isFormModified" class="margin-right20">
            {{'BMR.GENERATION.SAVE' | translate}}
          </idea-button>
          <idea-button type="button" color="principal-blue" [disabled]="!isFormModified" (click)="onCancel()">
            {{'GENERAL.CANCEL' | translate}}
          </idea-button>
        </div>

      </form>
    </div>
  </div>

</idea-section-container>

No error is displayed within the console.

Thank you for any help.

Answer 1

You can change the formControlName of the form elements in another page which open up on click of button and make it same as the id which is sent from previous page.

Then you can use

this.form.control.idSentFromPreviousPage.setValue(valueFromPreviousPage)