Angular - 如何通过Id自动填表

Question

我想用 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> &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>

控制台中没有显示任何错误。

感谢您的帮助。

Answer 1

您可以更改单击按钮打开的另一个页面中表单元素的 formControlName，使其与从上一页发送的 id 相同。

然后你可以使用

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

Angular - 如何通过Id自动填表

Angular - How to automaticly fill a form by Id

javascript

angularjs

typescript

angular-forms

angular-formbuilder