Angular 将角度形状控件指定给动态生成的对象数组

我有一个fromGroup，现在我想根据数据库值动态生成一些输入字段。我有一个类似obj的

{
    type:"text",
    name:"test_name"
    placeholder:"Test"
}

I have created input field like:

<input type="text" name="test_name" placeholder="Test">

并将生成的HTML推送到模板中，如：

<div [innerHTML]="getDynamicHTML()"></div>

---

现在的问题是无法为任何动态添加的输入字段添加值。我是如何编译生成的HTML的？

正如您所发现的，innerHTML内容不是由Angular插值的。看，所以这种方法是行不通的

如果您需要的每个输入字段都有一个对象数组，那么您应该能够使用ngFor在HTML中的数组中循环，ngFor可以动态创建您需要的字段

在获取和设置值时，如果采用上述方法，则可以在组件初始化时为数组中的每个字段添加表单控件。然后，在循环遍历模板中的每个字段时，可以将这些字段指定给它们，以便为每个字段获取/设置一个值

基本概念-让我知道你进展如何。在本例中，我将字段控件直接添加到字段数据数组中，但您可以创建新变量或使用字段组

HTML:

输入格式：
{{field.name}
当前值：
{{field.name}}值：
{{field.formControl.value}

TS:

fieldData=[{
键入：“文本”，
名称：“测试名称1”，
占位符：“测试1占位符”
},
{
键入：“文本”，
名称：“测试名称2”，
占位符：“测试2占位符”
}]
构造函数（）{
对于（设i=0；i

看看

form.setValue（）

和

form.patchValue（）

方法。使用后者，可以在表单中部分设置值

因此，如果您有一个具有动态生成字段值的对象，则可以使用：

//带值的示例对象
formValues={
测试名称：“John”，
测试地址：“伦敦”
...
}
//这将仅为formValues中具有匹配键的表单控件设置值
this.applicationForm.patchValue（formValues）；

您可以在初始化表单时设置一个值

<form [formGroup]="form">
    <input type="text" formControlName="test_name" placeholder="Test" />
</form>

this.form = this.fb.group({
   test_name: ['Some value', Validators.required],
});

this.form=this.fb.group({
测试名称：['Some value'，Validators.required]，
});

你能提供stackblitz吗？我已经创建了一个stackblitz，可以满足你的需要。-“让我知道你过得怎么样！”马特桑德斯先生，我真的很感谢你的帮助。谢谢你抽出时间。我正在检查你的答案。你是如何得到我的解决方案的？它做得好吗？

<h2>Input Form:</h2>
<form>
    <div *ngFor="let field of fieldData">
        <label>{{field.name}}</label> 
        <input [formControl]="field.formControl" [placeholder]="field.placeholder" />
    </div>
</form>
<h2>Current Values:</h2>
<div *ngFor="let field of fieldData">
    <label>{{field.name}} value: </label> 
    <span>{{field.formControl.value}}</span>
</div>

fieldData = [{
    type:"text",
    name:"test_name_1",
    placeholder:"Test 1 Placeholder"
},
{
    type:"text",
    name:"test_name_2",
    placeholder:"Test 2 Placeholder"
}]

constructor(){
    for (let i = 0; i < this.fieldData.length; i++) { 
        this.fieldData[i]['formControl'] = new FormControl('');
    }
}

<form [formGroup]="form">
    <input type="text" formControlName="test_name" placeholder="Test" />
</form>

this.form = this.fb.group({
   test_name: ['Some value', Validators.required],
});