将 Angular 表单控件分配给动态生成的对象数组
Assign Angular form controls to a dynamically generated array of objects
我有一个 fromGroup 现在我想根据数据库值动态生成一些输入字段。示例:我有像
这样的对象
{
type:"text",
name:"test_name"
placeholder:"Test"
}
I have created input field like:
<input type="text" name="test_name" placeholder="Test">
到目前为止我已经尝试过了,
向我的 FormGruop 添加动态控件
this.applicationForm.addControl(formFieldObj.name, new FormControl('', Validators.required));
并将生成的 HTML 推送到模板,如:
<div [innerHTML]="getDynamicHTML()"></div>
现在的问题是无法为任何动态添加的输入字段添加值。我如何编译生成的 HTML?
如您所见,HTML 内部内容未由 Angular 插入。请参阅 here,因此此方法行不通。
如果您需要的每个输入字段都有一个对象数组,您应该能够使用 ngFor 遍历 HTML 中的数组,这可以动态创建您需要的字段。
RE获取和设置值,如果你采用上述方法,你可以在组件初始化时为数组中的每个字段添加一个表单控件。然后可以在循环遍历它们时将它们分配给模板中的每个字段,因此您可以为每个字段获取/设置一个值。
基本概念 here - 让我知道您的进展情况。在此示例中,我将字段控件直接添加到字段数据数组,但您可以创建一个新变量或使用字段组。
HTML:
<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>
TS:
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.setValue()
和 form.patchValue()
方法。使用后者,您可以在表单中部分设置值。
因此,如果您有一个包含动态生成字段值的对象,您可以使用:
// sample object with values
formValues = {
test_name: 'John',
test_addr: 'London'
...
}
// this will setup values only for the form controls with matching keys in 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],
});
我有一个 fromGroup 现在我想根据数据库值动态生成一些输入字段。示例:我有像
这样的对象{
type:"text",
name:"test_name"
placeholder:"Test"
}
I have created input field like:
<input type="text" name="test_name" placeholder="Test">
到目前为止我已经尝试过了,
向我的 FormGruop 添加动态控件
this.applicationForm.addControl(formFieldObj.name, new FormControl('', Validators.required));
并将生成的 HTML 推送到模板,如:
<div [innerHTML]="getDynamicHTML()"></div>
现在的问题是无法为任何动态添加的输入字段添加值。我如何编译生成的 HTML?
如您所见,HTML 内部内容未由 Angular 插入。请参阅 here,因此此方法行不通。
如果您需要的每个输入字段都有一个对象数组,您应该能够使用 ngFor 遍历 HTML 中的数组,这可以动态创建您需要的字段。
RE获取和设置值,如果你采用上述方法,你可以在组件初始化时为数组中的每个字段添加一个表单控件。然后可以在循环遍历它们时将它们分配给模板中的每个字段,因此您可以为每个字段获取/设置一个值。
基本概念 here - 让我知道您的进展情况。在此示例中,我将字段控件直接添加到字段数据数组,但您可以创建一个新变量或使用字段组。
HTML:
<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>
TS:
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.setValue()
和 form.patchValue()
方法。使用后者,您可以在表单中部分设置值。
因此,如果您有一个包含动态生成字段值的对象,您可以使用:
// sample object with values
formValues = {
test_name: 'John',
test_addr: 'London'
...
}
// this will setup values only for the form controls with matching keys in 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],
});