在输入文本中如何设置对象的值并显示对象的字段？

Question

我使用 form reactive 并得到一个对象：

{
 id: 47,
 codice: "Milano"
}

那把服务器发给我。

当我将其分配给输入文本时，它显示 [object Object]。

如何在输入中显示“Codice”字段，但用对象维护值？因为当我提交表单时，我使用

检索值

this.editForm.get('destZona').value

我需要两个信息：id 和 codice。

如果你愿意，我可以与 StackBlitz 分享一个例子。谢谢！

Answer 1

输入文字会显示return文字，不能在里面放东西

您应该有一个用于 destZona 对象的子窗体组。

this.editForm = this.formBuilder.group({
    destZona: this.formBuilder.group({
        id: [yourObjId],
        codice: [yourObjCodice]
    })
});

然后您可以在您的模板中引用它，在您的输入父级之一上使用 formGroupName="destZona"，并将 formControlName="codice" 放在输入上。

Answer 2

创建formGroup变量

myForm: FormGroup;

创建一个获取对象并将其转换为 FormGroup

的方法

createFormGroup(obj): FormGroup {
    return new FormGroup({
      id: new FormControl(obj.id),
      codice: new FormControl(obj.codice),
    });
  }

订阅服务时使用 RxjS map 生成 FormGroup 并分配给 myForm 变量

  constructor(private dataService: DataService) {
    dataService
      .getData()
      .pipe(
        map((data) => (this.myForm = this.createFormGroup(data)))
      )
      .subscribe();
  }

在模板中：

<form [formGroup]="myForm">
  <input type="text" formControlName="codice" />
</form>

Angular demo

在输入文本中如何设置对象的值并显示对象的字段？

In an input text how to set value with an object and display a field of the object?

angular

angular-reactive-forms