角反应式-选项下拉菜单

Question

是否有一种方法可以使用反应性方法显示可观察到的表单值？对于这个例子，我有一个带有硬编码数据的表单，它在HTML中显示了我的标签列表，但是我面临两个问题--我希望有人能发现我看不到/理解的问题。

1. 当使用TypeError作为字段的初始窗体值时，存在一个this.labels$.label :无法读取未定义属性的“标签”。我希望它能从标签$()列表中提取第一个标签。
2. 如果我将上面的内容改为字符串。“‘Test”，下拉菜单呈现并得到以下内容

{"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>

Component.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" }

当我浏览反应性表单体验时，任何建议都会得到赏识;)

Answer 1

如果您只想查看FormGroup的值，那么可以通过以下两种方式来实现：

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

在HTML文件中：

formGroupInstance.valueChanges | async | json

1. 通过订阅FormGroup实例，在控制台中打印valueChanges实例的值。

在TypeScript文件中：

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

您可以找到一个示例这里的stackblitz.com

Answer 2

发现了问题。json对象需要一个值，以便在指令下拉列表中正确呈现。因此，将{“标签”：“标签-1”}更改为{“标签”：“标签-1”，“值”："value1“}工作。