使用 Angular 在选择框中绑定表单组答案

【问题标题】：Formgroup binding in select boxes with Angular使用 Angular 在选择框中绑定表单组
【发布时间】：2019-02-07 04:34:36
【问题描述】：

我有一个嵌套的 JSON 数组，我必须使用 formgroup 或 formarray 迭代到 HTML。此响应将根据数组的长度迭代到动态创建的选择框中。传入的 JSON 响应是：

var result = [{
    id: 1,
    options: [
      { option: 'Ram', toBeSelected: false },
      { option: 'Ravi', toBeSelected: true }
    ]
  },
  {
    id: 2,
    options: [
      { option: 'Pooja', toBeSelected: false },
      { option: 'Prakash', toBeSelected: false }
    ]
  }
]

我必须将其迭代到 HTML 中，如果这些选项中的任何一个将 toBeSelected 设置为 true，则应在 HTML 中预先选择该选项，如果没有，则可以显示占位符文本。

【问题讨论】：

标签： html angular formarray formgroups

【解决方案1】：

根据有问题的JSON，你可以这样：

ngOnInit() {
    this.form = this._FormBuilder.group({
      selections: this._FormBuilder.array([])
    });

    // the api call should be made here
    this.jsonResponse.map(item => {
        const opts = item.options.filter(o => {
            return o.toBeSelected
        });
        if (opts.length) {
            this.addSelections(opts[0].option);
        } else {
            this.addSelections();
        }
    });
}

get selections() {
    return this.form.get('selections') as FormArray
}

addSelections(value?: string) {
    this.selections.push(
        this._FormBuilder.control((value ? value : ''))
    );
}

实时取景here。

Stackblitz 链接：https://stackblitz.com/edit/dynamic-form-binding-kx7nqf

【讨论】：

您已经为单选按钮而不是带有硬编码 2 个选项的下拉选择框完成了此操作。这些数据也会动态出现。有没有可能实现？
谢谢你！这按要求工作。即使用户没有选择任何有效的表单，我也只想要一个更新。
然后，需要在表单中设置验证。
是的，我认为那会很好。就像如果是选定的，那么表单应该是无效的
哦！只是忘记了那里的验证器。你拯救了我的一天！

【解决方案2】：

类似的东西？

<div *ngFor="let result of results">
  <p>ID - {{ result.id }}</p>
  <div *ngFor="let option of result.options">
    <input 
      type="checkbox" 
      [checked]="option.toBeSelected">
      {{ option.option }}
  </div>
</div>

虽然这不是 FormGroup 的示例，但应该可以帮助您了解如何完成它。

Sample StackBlitz

【讨论】：

但我需要将其与 formarray 或 formgroup 集成以进行验证，如果未选择任何选项，则不涵盖该部分，占位符显示
那么在这种情况下，您正在寻找响应式表单？还是模板驱动表单？我认为您应该选择响应式表单。
是反应形式
好的。我在做这个工作。我会尽快更新我的答案。