Я хотел бы заполнить форму по Id с Angular FormBuilder. Моя проблема в том, что я сейчас не знаю, как это сделать, и я пробовал многие решения тем, но на самом деле ничего не помогает. вот что я хочу: когда я нажимаю на кнопку обновления, открывается другая страница с некоторыми полями, которые совпадают, и эти поля должны быть заполнены. Родительский компонент работает и отправляет Id через маршрутизатор. Но компонент, который должен перехватить и заставить представление работать, вообще не работает. Вот код этого компонента:
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;
}
}
}
Например, я не знаю, как заменить «нулевые» значения соответствующими значениями. И я не знаю, как получить идентификатор в этом компоненте.
Вот шаблон:
<idea-section-container>
<div title>
<fa-icon icon="cogs"></fa-icon>
{{'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>
В консоли не отображается ошибка.
Спасибо Вам за любую помощь.