我想用Angular FormBuilder通过Id来填写一个表单。我的问题是,我现在不知道怎么做,我已经尝试了许多主题的解决方案,但没有任何帮助。我想要的是:当我点击一个按钮更新时,打开另一个页面,其中有一些匹配的字段,这些字段必须填写。父组件正在工作,并通过路由器导航发送一个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;
}
}
}
例如,我不知道如何将 "null "的值替换为匹配的值。我也不知道如何在这个组件中获取Id。
这里是模板。
<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>
在控制台中没有显示错误。
谢谢你的帮助。
你可以改变 formControlName
在另一个页面中的表单元素,点击按钮就会打开,并使其与另一个页面中的表单元素相同。id
从上一个页面发送的。
然后您可以使用
this.form.control.idSentFromPreviousPage.setValue(valueFromPreviousPage)