无法将字符串传递给 formGroup答案

【问题标题】：Not able to pass string to formGroup无法将字符串传递给 formGroup
【发布时间】：2021-05-01 22:35:25
【问题描述】：

1.我想遍历一个数组

*ngFor="let item of myformNameArray"

认为 myformNameArray.length 有 3 个项目如果我控制台 item 它会像

myFormName1
myFormName2
myFormName3

我已经在我的 typescript 组件中创建了这些表单组。

例子

<form [formGroup]="myFormName3">

它将完美运行！

但我想循环：意思是

<div *ngFor="let item of  myformNameArray">
<form [formGroup]="{{item}}">
</form>
</div>

所以当我这样做时，

[formGroup]="{{item}}"

它给我一个错误，不能分配给对象或插值

或者

[formGroup]="see(item)"

在哪里，

see(item) :string {
return String(item);
}

ERROR TypeError: can't assign to property "validator" on "see(item)": not an object

【问题讨论】：

如何将表单放入组件中，将项目字符串传递给组件以呈现表单，然后在 ngFor 代码中使用组件？

标签： javascript html angular typescript angular-reactive-forms

【解决方案1】：

[formGroup] 需要一个 FormGroup 对象而不是字符串

您需要创建表单组数组而不是字符串名称

TS：

myformArray = [
   this.myFormOne,
   this.myFormTwo,
   this.myFormThree
]

HTML：

<div *ngFor="let item of  myformArray">
    <form [formGroup]="item">
    </form>
</div>

你也可以使用 formArray 代替普通数组

TS：

myFormArray = new FormArray([]);

this.myFormArray.push(myFormOne);
this.myFormArray.push(myFormTwo);
this.myFormArray.push(myFormThree);

HTML：

<div *ngFor="let form of myFormArray.controls;">
  <form [formGroup]="form">
    <input formControlName="controlOne" />
    <input formControlName="ControlTwo" />
  </form>
</div>

而且你不应该同时使用方括号和大括号（插值）进行属性绑定，使用方括号或插值。

内部角度将方括号转换为插值

要么这样做：[formGroup]="item" 或者这个：formGroup="{{item}}"

不是两个

【讨论】：