使用fromGroup生成的角动态formControlName [英] Angular dynamic formControlName generate with fromGroup
问题描述
我创建了一个由JSON数组组成的表单，据此，我正在生成Validation，formControlName并通过formGroup生成输出.
I have created a form which consist of JSON array and according to that, I am generating Validation,formControlName and generating output through formGroup.
this.ELEMENT_DATA_UPDATE = [
{
first_name : 'abc',
last_name : 'xyz',
phone : 8888888888
}
];
在这里，我使用的是Angular材质，因此将该键值对转换为另一个包含
Here, I am using Angular material so converted this key value pair to another array consists of
{"key" : "first_name" , "value" : "abc" , "name" : "First name :"}
这是输入JSON数组固定的情况.但是我的项目包含大规模的数据处理，其中输入JSON数组的内容将更改很多次.生成UI模块没有问题，但是当我尝试将Validation和Forms模块应用于此动态生成的内容时，整个流程就会崩溃，
This is when the input JSON array is fixed. But my project consists of data manipulation on a large scale in which input JSON array contents will change many times. There is no problem in generating UI modules, but when I try to apply Validation and forms modules to this dynamically generated contents, whole flow collapse ,
这是我的代码
var jsonArray : any = [{}];
export class UpdateContactFieldDialog {
matcher = new MyErrorStateMatcher();
updateForm: FormGroup;
formString : string = null;
ELEMENT_DATA_UPDATE : any[] = [];
keyArray : any[] = [];
myJobFunctionControl = new FormControl();
optionsJobFunction: string[] = ['Operations', 'Production', 'Manufacturing'];
myTitleControl = new FormControl();
optionsTitle: string[] = ['HR', 'Developer', 'Tester', 'MD', 'CEO', 'Director'];
constructor(private formBuilder: FormBuilder,private dialogRef: MatDialogRef<AddContactFieldDialog> ) {
}
ngOnInit() {
//dumy randomly geneated fields
this.ELEMENT_DATA_UPDATE = [
{
first_name : 'abc',
last_name : 'xyz',
job_function : 'Production',
title : 'Developer',
email : 'abc@abx.com',
phone : 7945612304
}
];
for (let obj of this.ELEMENT_DATA_UPDATE) {
console.log("object length:", this.ELEMENT_DATA_UPDATE.length);
for (let key in obj) {
this.keyArray.push({'key' : key , 'value' : obj[key] , 'name': (key.charAt(0).toUpperCase() + key.substr(1).toLowerCase()).replace(/_/g, ' ')});
}
break;
}
console.log(this.keyArray);
console.log(this.ELEMENT_DATA_UPDATE[0]);
for(let formModule of this.keyArray){
var keyData = formModule.key;
if(this.formString != null && keyData == 'email' || keyData.includes('mail')){
this.formString = this.formString +''+keyData+':[this.ELEMENT_DATA_UPDATE[0].'+keyData +',[Validators.required,Validators.email]], ';
}
else
if(this.formString != null && keyData == 'phone' || keyData.includes('number') || keyData.includes('no') || keyData.includes('num') ){
this.formString = this.formString +''+keyData+':[this.ELEMENT_DATA_UPDATE[0].'+keyData +',[Validators.required,Validators.minLength(10),Validators.maxLength(10),Validators.pattern("[0-9]*")]], ';
}
else
if(this.formString == null && keyData != 'email' && keyData != 'phone'){
this.formString = ''+keyData+':[this.ELEMENT_DATA_UPDATE[0].'+keyData +',Validators.required], ';
}
else{
this.formString = this.formString + ''+keyData+':[this.ELEMENT_DATA_UPDATE[0].'+keyData +',Validators.required], ';
}
}
console.log(this.formString);
jsonArray = (this.formString);
this.updateForm = this.formBuilder.group(jsonArray);
}
// convenience getter for easy access to form fields
get f() { return this.updateForm.controls; }
submitContact() {
this.submitted = true;
// stop here if form is invalid
if (this.updateForm.valid) {
// alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.updateForm.value))
console.log(this.updateForm.value);
this.dialogRef.close();
}
else{
return;
}
}
}我的代码正在生成以下字符串形式的代码
My code is generating following code as String
first_name: ['', Validators.required],
last_name: ['', Validators.required],
job_function: ['', [Validators.required]],
title: ['', [Validators.required]],
email: ['', [Validators.required, Validators.email]],
phone : ['',[Validators.required, Validators.minLength(10), Validators.maxLength(10), Validators.pattern('[0-9 ]*')]]
我希望在formGroup中使用它，以便我可以动态生成formControls，为它们分配验证和值.
I want this to be used inside of formGroup so i can dynamically generate formControls , assign them validation and values.
updateForm = this.formBuilder.group(jsonArray);
推荐答案
补充我的评论，注意:您需要添加验证器(我无法在您的代码中看到它们)
Complementary my comment, NOTE:you need add the validators (I can't see them in your code)
this.updateForm=new FormGroup({}) //<--create the formGroup
for(let formModule of this.keyArray){
this.updateForm.addcontrol(formModule.key,new FormControl(formModule.Value))
}
此外，如果我们在keyArray中的对象就像
Moreover, if our objects in keyArray was like
{ "key" : "key_name" ,
"value" : "value" ,
"name" : "Key name" ,
validators:[Validators.required, Validators.email]
}
我们可以改善循环
for(let formModule of this.keyArray){
this.updateForm.addcontrol(formModule.key,
new FormControl(formModule.Value,formModule.validators))
}
好吧，如果很难像我们展示的那样使我们的对象成为一个服务，但是我们的服务有可能像这样为我们服务:
Well, if difficult that our object becomes from a service like I showed, but it's possible our services serve us object like:
{ "key" : "key_name" ,
"value" : "value" ,
"name" : "Key name" ,
validators:[{type:"required"},{type="min",args:3}]
}
在进行循环之前，我们可以使用
Before make the loop we can use
this.keyArray.forEach(x=>
{
if (x.validators)
{
conts validators=[];
validators.forEach(v=>{
switch (v.type)
{
case "required":
validators.push(Validators.required);
break;
case "min":
validators.push(Validators.min(v.arg);
break;
...
}
})
x.validators=validators;
}
}
关于要显示错误，我们必须考虑到表单中的控件是
About to show the errors we must take account that our controls in a form is
updateForm.get(keyArray.key)
例如，
<div class="col-lg-6" *ngFor="let keyArray of keyArray">
<mat-form-field>
<input type="text" [formControlName]="keyArray.key" matInput
[placeholder]="keyArray.name"
[ngClass]="{ 'is-invalid': submitted && updateForm.get(keyArray.key).errors }"
autocomplete="off" />
<mat-error *ngIf="submitted && updateForm.get(keyArray.key).hasError('required')">
{{keyArray.name}} is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
这篇关于使用fromGroup生成的角动态formControlName的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
