Question

我有一个子组件，其表单使用FormBuilder来创建我的被动表单。然后我有一个按钮向父亲发出form object，以便我可以在确认页面上显示这些值。

我可以通过访问form object来访问this.formData = $event.value;和值。

在我的确认页面上，我需要显示所选内容的文字（下拉标签），而不是基于身份的value。

我创建了我的表单：

this.transitionForm = this.fb.group({
  changeType: ['', Validators.required],
  hierarchy: ['-1'],
  segment: ['-1'],
  supervisor: ['-1'],
  budgetMarket: ['-1'],
  incentivePlan: ['-1']
});

这些字段中的大多数是下拉输入，允许单个值选择。

表单对象是否完全保留此选定文本？

如果没有，那么能够访问此信息的最佳方法是什么，以便我可以显示有关要提交的数据的可读确认页面？

更新

以下是我在此表单中的一个下拉列表的示例：

<select name="segment" id="segment" formControlName="segment" class="form-control input-sm">
  <option value="-1" selected="selected">No Segment Change</option>
  <option *ngFor="let s of segments" value="{{ s.SegmentID }}">{{ s.SegmentName }}</option>
</select>

Answer 1

据我了解，只有在您进入确认页面后才能访问您选择的值，而不是实际文本。

这给你留下了两个选项，一个比另一个更复杂。

您可以编写自定义选择组件，它允许您选择对象而不是简单值，或者您可以使用所选值来查询原始segment对象。

这是我经常使用的两个功能（lodash的依赖，但是你也可以使用google的纯替代品），我已将这些功能放在静态Utils服务中我可以在我的应用程序中传递而无需注入它：

import {Injectable} from '@angular/core';
import * as _ from 'lodash';

@Injectable()

export Utils {

  static findObjectIndex(list: any[], obj: any, key: string, isCaseSensitive = false): number {

    return _.findIndex(list, (item) => {

      if (!isCaseSensitive) {
        return String(obj[key]).toLowerCase() === String(item[key]).toLowerCase();
      }

      return obj[key] === item[key];
    });
  }

  static findObjectByQuery(list: any[], key: string, query: string, isCaseSensitive = false): any {

    return _.find(list, (item) => {

      if (!isCaseSensitive) {
        return item[key].toLowerCase() === query.toLowerCase();
      }

      return item[key] === query;
    });
  }
}

其中一个查询实际对象，另一个查找对象的索引。你可以选择哪一个最适合你。

因此，对于确认页面，您只需抓住segments并执行：

// selectedValue would be the selected SegmentID
const originalObject = Utils.findObjectByQuery(this.segments, 'SegmentID', selectedValue);

现在，您可以从该对象访问任何内容。

我希望这会有所帮助。

Angular2 - Reactive Forms需要获取选定的文本

1 个答案: