本文将介绍如何动态创建表单组件,我们最终实现的效果如下:
在阅读本文之前,请确保你已经掌握角响应式表单和动态创建组件的相关知识,如果对相关知识还不了解,推荐先阅读一下角4。x活性形式和角4。x动态创建组件这两篇文章。对于已掌握的读者,我们直接进入主题。
<>强创建动态表单
创建DynamicFormModule
在当前目录先创建<代码>动态表单目录,然后在该目录下创建<代码> dynamic-form.module。ts 文件,文件内容如下:
动态表单/dynamic-form.module.ts
从“@angular进口{NgModule}/核心”;
从“@angular/普通”进口{CommonModule};
从@angular/形式的进口{ReactiveFormsModule};
@NgModule ({
进口:[
CommonModule,
ReactiveFormsModule
]
})
出口类DynamicFormModule {}
之前
创建完<代码> DynamicFormModule 模块,接着我们需要在AppModule中导入该模块:
从“@angular进口{NgModule}/核心”;
从“@angular/platform-browser”进口{BrowserModule};
从“进口{DynamicFormModule}。/动态表单/dynamic-form.module”;
进口{AppComponent}”。/app.component ';
@NgModule ({
进口:[BrowserModule, DynamicFormModule],
声明:[AppComponent],
引导(AppComponent):
})
出口类AppModule {}
之前
创建DynamicForm容器
进入<代码>动态表单目录,在创建完<代码> 容器目录后,继续创建<代码>动态表单目录,然后在该目录创建一个名为<代码> dynamic-form.component.ts>
进口{组件,输入,在
& lt;/form>
｀
})
出口类DynamicFormComponent实现>
从“进口{DynamicFormComponent}。/集装箱/动态表单/dynamic-form.component”;
@NgModule ({
进口:[
CommonModule,
ReactiveFormsModule
),
声明:[
DynamicFormComponent
),
出口:[
DynamicFormComponent
]
})
出口类DynamicFormModule {}
之前
现在我们已经创建了表单,让我们实际使用它。
<强>使用动态表单
打开app.component.ts文件,在组件模板中引入我们创建的<代码>动态表单>
app.component.ts
从“@angular进口{组件}/核心”;
接口FormItemOption {
类型:字符串;
标签:字符串;
名称:字符串;
占位符# 63;:字符串;
选项# 63;:string []
}
@ component ({
选择器:“exe-app”,
模板:
& lt; div>
& lt;动态表单(配置)="配置"祝辞& lt;/dynamic-form>
& lt;/div>
｀
})
出口类AppComponent {
配置:FormItemOption []=[
{
类型:“输入”,
标签:“全名”,
名称:“名字”,
占位符:“输入您的名字”
},
{
类型:“选择”,
标签:最喜欢的食物,
名称:“食物”,
选择:['披萨',“热狗”,“Knakworstje”,“咖啡”),
占位符:“选择一个选项”
},
{
类型:“按钮”,
标签:“提交”,
名称:“提交”
}
];
}
之前
上面代码中,我们在AppComponent组件类中设置了<代码>配置> FormItemOption>
<>强自定义表单项组件
FormInputComponent
在<代码>动态表单目录,我们新建一个<代码> 组件目录,然后创建<代码>表单输入,<代码> form-select 和<代码>表单按钮三个文件夹。创建完文件夹后,我们先来定义<代码>表单输入>
form-input.component.ts
从“@angular进口{组件,ViewContainerRef}/核心”;
从@angular/形式的进口{FormGroup};
@ component ({
选择器:“表单输入”,
模板:
& lt; div [formGroup]="集团"比;
& lt; label>{{配置。标签}}& lt;/label>
& lt;输入
type=" text "
[attr.placeholder]=" config.placeholder "
[formControlName]=" config.name "/比;
& lt;/div>
｀
})
出口类FormInputComponent {
配置:任何;
组:FormGroup;
}
