Angular：来自订阅的反应形式设置值

Question

我正在使用 MEAN 堆栈为一个部门构建票务应用程序。用户将填写一张票请求。信息将存储在数据库中，然后显示在页面上。该部门的其他人将需要 change/correct 某些字段。

我有一些 select 字段需要使用来自数据库中原始表单数据的预先selected 信息进行填充。

我遇到的问题是当我将表单控件的值设置为响应信息时，出现 "undefined" 错误。我假设 dom 正在完成在它达到设定值但不确定之前。

如有任何建议，我们将不胜感激。

详情-wo.component.ts

import { Component, OnInit } from '@angular/core';
...
import { WoService } from '../../../service/wo.service';
import {Wo } from '../../../models/wo.model';
.......

@Component({
..........
})
export class DetailWoComponent implements OnInit {
  wo: Wo;
  stat;
  woUpdateForm: FormGroup;
 .............

  private woId: string;

  constructor(public woService: WoService, public route: ActivatedRoute) {}

  ngOnInit() {
    this.route.paramMap.subscribe((paramMap: ParamMap) => {
      this.woId = paramMap.get('woId');
      this.woService.getWo(this.woId).subscribe(woData => {
        this.wo = {
          _id: woData._id,
         ......
          status: woData.status,
          ....
        };
       this.stat = theis.wo.status;

      });
    });

    // form
    this.woUpdateForm = new FormGroup({
      assignment: new FormControl('No One', {
        validators: [Validators.required]
      }),
      status: new FormControl(null, {
        validators: [Validators.required]
      }),
      reqtype: new FormControl(null, {
        validators: [Validators.required]
      })
    });


    this.ewoUpdateForm.controls['status'].setValue(this.stat); // value from wo data from db

  }

详情-wo.component.html

<h3>EWO Details</h3>
  <h5>EWO #: <span class="orange">{{ewo?._id}}</span></h5>

<div class="row mt-3">

  <div class="col">
    <h5>User Input</h5>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">Start Date: {{wo.startDate}} </li>    
      <li class="list-group-item">Status: {{wo.status}} </li>
....
    </ul>
  </div>
 </div>


<form class="mt-5 mb-5" (submit)="onUpdateWo()" [formGroup]="woUpdateForm">
  <div class="row bg border p-3 rounded">
 
.......
  <!-- Assigment -->
  <div class="form-group col">
    <label for="status">Assignment: </label>
    <select class="form-control" formControlName="assignment">
      <option *ngFor="let assign of assigments" value="{{assign.id}}">{{assign.name}}</option>
    </select>
  </div>



  <!-- Status change -->
  <div class="form-group col">
    <label for="status">Status Change </label>
    <select class="form-control" formControlName="status">
      <option *ngFor="let status of statuses" value="{{status.id}}">{{status.name}}</option>
    </select>
  </div>

</div>
</form>
<code>{{ewo | json}}</code>

Answer 1

您需要在订阅数据服务时创建并初始化 formGroup，否则 formGroup.setValue 会独立触发后端调用。

此外，我可能会使用 RxJs 运算符映射，将 queryParam 的检索和后端调用结合起来，以避免两个订阅彼此

Answer 2

您是否考虑过使用 ngModel 对表单中的 wo 属性执行双重绑定？有什么能阻止你这样做吗？

如果没有，你不妨像这样双重绑定：

  <!-- Status change -->
  <div class="form-group col">
    <label for="status">Status Change </label>
    <select class="form-control" formControlName="status" [(ngModel)]="wo.status">
      <option *ngFor="let status of statuses" [value]="status">{{status.name}}</option>
    </select>
  </div>
<!-- etc... -->

您可以参考 angular 文档中的此部分：https://angular.io/guide/template-syntax#two-way-binding---

Angular：来自订阅的反应形式设置值

Angular: reactive form set value from subscription

mean-stack

angular

angular-reactive-forms