Angular – 如何通过ID自动填写表格?

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

在控制台中没有显示错误。

谢谢你的帮助。

解决方案:

你可以改变 formControlName 在另一个页面中的表单元素,点击按钮就会打开,并使其与另一个页面中的表单元素相同。id 从上一个页面发送的。

然后您可以使用

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

给TA打赏
共{{data.count}}人
人已打赏
未分类

先删除数组或列表中的内容

2022-9-15 5:08:17

未分类

SUM最后N个有标准的值

2022-9-15 5:08:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索