如何在另一个组件引导模式中使用的组件patchValue？

Question

首先，我要介绍一下情况。

构成部分：

form

• SearchModifyDelete组件

1. 添加

添加供应商表单用于在数据库中保存供应商详细信息。

为了防止修改，第二组件在表中列出了所有供应商的详细信息，我在最后一栏中添加了一个修改和删除按钮。

在单击“修改”时，会打开一个引导模式，并在其中打开供应商组件。我也在考虑使用相同的组件进行修改。

单击“修改”按钮后:模式与addvendor组件一起完美地打开。

问题:如何在单击“修改”按钮后，从搜索修改组件中调用一个方法来填充附件供应商组件中的值。下面是我的密码。

AddVendor HTML

 <form class="justify-content-center"[ngClass]="vhtag?'formsize':'formsize2'" [formGroup]="addvendorForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
      <label for="vendorname" class="">Vendor Name:</label>
      <input type="text" class="form-control" placeholder="Vendor Name" id="vendorname" name="vendorname"
       formControlName="vendor_name">
       <div *ngIf="addvendorForm.get('vendor_name').invalid && addvendorForm.get('vendor_name').touched">
        <small class="text-danger">Select Vendor </small>
      </div>
    </div>
    <div class="form-group">
      <label for="contact">Contact:</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon1">+91</span>
        </div>
      <input type="text" class=" form-control" placeholder="Contact" id="contact" pattern="[0-9]{10}"
      name="contact1" maxlength="10" formControlName="vendor_contact1" >
      
      <input type="text" class=" form-control" placeholder="Contact" id="contact2"
       name="contact2" maxlength="10" formControlName="vendor_contact2">
       
    </div>
    <div *ngIf="addvendorForm.get('vendor_contact1').invalid && addvendorForm.get('vendor_contact1').touched">
      <small class="text-danger">Provide Contact Details </small>
    </div>
    </div>
    <div class="form-group">
      <label for="email">Email-Id:</label>
      <input type="email" class="form-control" placeholder="Email" id="email" name="email"
      pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
      required formControlName="vendor_email">
      <div *ngIf="addvendorForm.get('vendor_email').invalid && addvendorForm.get('vendor_email').touched">
        <small class="text-danger">Enter Email ID </small>
      </div>
    </div>
    <div class="form-group">
      <label for="address">Address:</label>
      <textarea id="address" class="form-control" name="Address" rows="2" formControlName="vendor_address">
        At w3schools.com you will learn how to make a website.
            </textarea>
    </div>
      <div class="text-center">
      <div class="row">
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
          <button type="submit" class="btn btn-secondary" [disabled]="false" *ngIf="vhtag">Save</button>
        </div>
        <div class="col-md-4">
          <button type="button" class="btn btn-info mb-0" *ngIf="!vhtag">Update</button>
        </div>
    
    </div>
  </div>
  </form

AddVendor组件ts文件

ngOnInit(): void {

    console.log("ngOnInit of Vendor  ");
    this.vhtag=this.editHandler.vheading;
    this.formEditMode=this.editHandler.getEditVendorMode;

    this.addvendorForm=this.fb.group({
      vendor_name:[null,Validators.required],
      vendor_contact1:[null,Validators.required],
      vendor_contact2:[null],
      vendor_email:[null,Validators.required],
      vendor_address:[null]
    })   
  }

搜索修改HTML文件：-

<div class="container">
<table class="table table-striped table-bordered">
    <thead class="thead-dark">
      <tr>
        <th scope="col">Sr.no</th>
        <th scope="col">Vendor Name</th>
        <th scope="col">Contact</th>
        <th scope="col">Contact-2</th>
        <th scope="col">Email</th>
        <th scope="col">Address</th>
        <th scope="col">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let vendor of vendorData let i=index"  >
        <td>{{i+1}}</td>
          <td>{{vendor.vendor_name}}</td>
        <td>{{vendor.vendor_contact1}}</td>
        <td>{{vendor.vendor_contact2}}</td>
        <td>{{vendor.vendor_email}}</td>
          <td style="width: 410px;">{{vendor.vendor_address}}</td>  <!-- Max 61 Character-->
          <td class="text-center ">           
              <div class="row row-no-gutters c-btn">
              <div class="col-sm-6">
              <a class=""  data-toggle="tooltip" data-placement="top" title="Modify"
               data-toggle="modal" data-target="#staticBackdrop" (click)="onEdit(vendor.vendor_id)">
                <i class="far fa-edit" style="color: rgb(3, 85, 161);"></i></a>
              </div>
              <div class="col-sm-6">
              <a class="" href="#" data-toggle="tooltip" data-placement="top" title="Delete" (click)="onDelete()"
              ngbTooltip="Tooltip on top">
                <i class="far fa-trash-alt" style="color:rgb(146, 31, 31);"></i></a>
              </div>
          </div>
          </td>
          </tr>
        </tbody>
  </table>

  <!-- Button trigger modal -->

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Update Vendor Detail</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <app-add-vendor></app-add-vendor>
      </div>
    </div>
  </div>
</div>
</div>

搜索修改组件ts文件：-

ngOnInit(): void {
    console.log("In search modify OnInit ")
    this.editformHandler.vheading = false;
    this.datasaveService.getAllVendor().subscribe((res) => {
      this.vendorData = res;
    });
  }

  onEdit(vid: number) {
    const vfound = this.vendorData.find((v) => v.vendor_id == vid);
    this.editformHandler.setEditVendorMode=true;
    this.editformHandler.setEditVendorData=vfound;
  }

请给我建议。

Answer 1

要解决我的项目中的这个问题，我需要在调用patchValue时设置一个超时。可能，角在调用patchValue之后已经初始化了组件。所以这对我有用。

例如：

 edit(product: Product) {
    setTimeout(() => {
      this.form.patchValue(product);
    }, 1);
  }