Question

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

我有一些选择字段，需要使用数据库中原始表单数据中的预选信息来填充。

我遇到的问题是，当我将表单控件的值设置为响应信息时，出现“未定义”错误。我认为dom完成了在达到设定值之前，但不确定。

任何建议都值得赞赏。

detail-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

  }

detail-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

您需要在对dataService的订阅中创建和初始化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... -->

您可以在有角度的文档中参考本节：https://angular.io/guide/template-syntax#two-way-binding---

角度：订阅的反应式表单设置值

2 个答案: