在选择语句更改期间获取多个插值 - Angular & ngFor

Question

我有一个表单，要求用户选择项目标题。除了该项目标题（选中时），我还想获取与该选择相关的另外两个值 - 然后，使用这些值添加到表单数据，我最终将保存到我的数据库中。正在循环的选择列表选项包含大量数据，而不仅仅是项目标题。进行此选择时，我想使用其中的一些数据。

在 HTML 中，我循环遍历“项目”并要求用户选择一个。很容易。当他们选择此选项时，他们会自动使用 value 属性填充“formControlName”。本质上，我还想用这个选择值填充更多的“formControlName”——有点像在这个选择中使用多个 VALUE 属性。我知道我可以在 value 属性中插入更多内容，但它会重载“formControlName”

我想获取此“项目”选择的其他两个属性 - projectManager._id 和 projectManager.email - 我想在保存时将这些值与表单一起保存

----- HTML -----

<!-- PROJECT -->
        <div class="form-group col-sm-4">
          <label>Project</label>
          <select class="custom-select form-control" formControlName="project">
            <option *ngFor="let project of projects" value="{{project?._id}}">
              {{ project.projectTitle | titlecase }}
            </option>
          </select>
        </div>

----- TS ------

// INITIATE THE FORM
    this.requestForm = this.fb.group({
      userId: this.currentUser.id,
      userEmail: this.currentUser.email,
      projectManagerId: '',
      projectManagerEmail: '',
      department: '',
      project: '',
      episode: '',
      requestItems: this.fb.array([
        this.fb.group({
          timecodeIn: '',
          timecodeOut: '',
          reason: '',
          line: '',
          note: ''
        })
      ])
    });

Answer 1

在这些情况下，我通常会在进行选择时在 valueChanges observable 中获取这些属性，因为您不想弄乱项目表单控件的值。那将是：

this.requestForm.get('project').valueChanges
  .subscribe((projectId: number) => {
    const project = this.projects.find((project) => project.id === projectId);
    * do whatever else with the values *
  });

这样，更改与选择表单值的更改相关联，这本质上是您想要的反应式表单。