Javascript 使用反应式表单的Angular 7动态表单验证

我目前正在开发一个动态表单生成器，它有一个管理端和一个用户端，在管理端，您可以设置输入的名称和类型，例如：名字和文本框，您可以添加或删除字段，并且有一个设置数量的类型，您可以选择，当您完成后，管理员会将表单保存到数据库中。在用户前端，从数据库中提取from，并使用patchValue设置from。我遇到的问题是用户对表单上问题的输入。我试图弄清楚如何首先设置用户用来回答问题的输入的类型和占位符

以及动态地将验证规则应用于每个输入，因此，例如，用户希望填写一张表格，填写他们的名字、姓氏、年龄和CV作为我想要的名字和姓氏，以及一个正则表达式，以便只允许某些字符，对于我想要的最小和最大数字以及CV。当用户提交表单时，我只想发送输入的名称和值，而不是整个表单

但是请记住，这些表单是完全动态的，因此我需要根据设置的输入类型验证用户的输入

/*类型脚本代码*/
从“@angular/core”导入{Component，OnInit}；
从“@angular/forms”导入{FormArray、FormBuilder、FormGroup、Validators}；
从“../form.service”导入{FormService}；
从'@angular/router'导入{ActivatedRoute}；
@组成部分({
选择器：'应用程序反应'，
templateUrl:'./reactive.component.html'，
样式URL:['./reactive.component.scss']
})
导出类ReactiveComponent实现OnInit{
公共形式：FormGroup；
公共领域清单：任何；
类型：阵列；
表格数据：任何；
参数：字符串；
获取contactFormGroup（）{
将此.form.get（'inputs'）作为FormArray返回；
}
建造师(
专用路由：激活的路由，
私人fb:FormBuilder，
私有api:FormService）{}
恩戈尼尼特（）{
/*首先，我初始化表单*/
this.form=this.fb.group({
名称：[null，Validators.compose（[Validators.required]）]，
组织：[null，Validators.compose（[Validators.required]）]，
输入：this.fb.array（[this.createForm（）]））
});
this.route.paramMap.subscribe（params=>{
this.Param=params.get（'id'）；
this.getForm（this.Param）；
});
//将fieldslist设置为此字段
this.fieldList=this.form.get（'inputs'）作为FormArray；
}
//formgroup
/*I初始化输入的形式数组*/
createForm（）：FormGroup{
返回此.fb.group({
类型：[null，Validators.compose（[Validators.required]）]，/*它们来自数据库*/
名称：[null，Validators.compose（[Validators.required]）]，/*它们来自数据库*/
值：[null，Validators.compose（[Validators.required]）]/*此值由用户填写*/
});
}
/*我使用API服务使用表单Id调用DB*/
获取表单（id）{
this.api.getForm（id）.subscribe(
（数据：any）=>this.setForm（数据）
);
}
getFieldsFormGroup（索引）：FormGroup{
const formGroup=this.fieldList.controls[index]作为formGroup；
返回表单组；
}
/*这里我设置了我的表单数据*/
setForm（数据）{
常数d=数据。结果；
这个.form.patchValue({
名称：[d[0]。表单名称]，
组织：[d[0]。组织]，
});
this.form.setControl（'inputs'，this.setExistingFields（d[0].fields））；
}
/*这里我设置了我的输入数组数据*/
设置现有字段（字段：任意）：FormArray{
常量格式=新格式（[]）；
this.fieldList=formArray；
fields.forEach（f=>{
formArray.push（this.fb.group({
姓名：f.name，
类型：f.type，
价值：f.value
}));
});
返回阵列；
}
提交（）{
/*在这里，当我将表单发送回服务器时，我只想发送输入的名称和值，而不想发送其他内容*/
log（this.form.value.inputs）；
}
}

/*HTML代码*/
表格名称
请填写所有字段。
保存形式

它有点旧，但我希望这能帮助您这是一个正确的想法，但我对如何将其应用于我的代码有点困惑，如果我只拥有所有的验证器，那么我就不必触摸HTML，这样就可以解决我的问题了