时间戳

首页 > 解决方案 > Angular Reactive Form - 选项下拉菜单

angular - Angular Reactive Form - 选项下拉菜单

问题描述

有没有办法使用响应式方法显示来自 Observable 的表单值？对于这个示例，我有一个包含硬编码数据的表单，它在 HTML 中显示了我的标签列表，但我面临两个问题，希望有人能发现我没有看到/理解的问题。

  1. 使用 this.labels$[0].label 作为字段的初始表单值时，出现 TypeError: Cannot read property 'label' of undefined。我希望它会从我的标签 $() 列表中提取第一个标签。
  2. 如果我将上面的内容更改为字符串，例如“测试”，下拉菜单会呈现，我会得到以下内容

{"labels": "Test", "field1": "Some value", "field2": "Some value" } 但是当我更改下拉菜单时，它会完全删除标签值。

{"field1": "Some value", "field2": "Some value" }

TS

get labels$() {
  return [
        { "label": "label-1" }, // e.g. Mr.
        { "label": "label-2" },
        { "label": "label-3" },
        { "label": "label-4" }
      ];
}

HTML

<rx-select formControlName="labels" [options]="labels$ | async" [label]="Label"></rx-select>

组件.ts

return new FormGroup({
          labels: new FormControl('', [Validators.required]),
          field1: new FormControl('', [Validators.required]),
          field2: new FormControl('', [Validators.required]),
        });

形式

理想的表单值如下，我可以看到这些值随着我的交互而变化。

{"labels": "label-1", "field1": "Some value", "field2": "Some value" }

当我浏览反应式表单体验时，任何建议表示赞赏；）

标签： angularangular-reactive-forms

解决方案

如果您只想查看 FormGroup 的值，则可以通过 2 种方式进行：

  1. 使用管道打印HTML中 FormGroup 实例的值async。json需要管道将对象格式化为文本。

在 HTML 文件中：

formGroupInstance.valueChanges | async | json
  1. 在控制台中打印 FormGroup 实例的值，方法是订阅 valueChanges.

在 TypeScript 文件中：

formGroupInstance.valueChanges.subscribe(value => console.log(value));

你可以在这里找到一个例子| stackblitz.com

推荐阅读