javascript - 如何使用验证编辑嵌套的反应式表单?
问题描述
我正在从具有数组数据格式的服务中检索数据。现在,如果我有 n 个数据的数组,我如何以嵌套形式绑定数据?表单已经填满了这些数据,并且验证字段也应用在其中。
这是我的父组件 html代码。
<form [formGroup]="secondForm" (ngSubmit)="onSecondSubmit()" *ngIf="EnableSecond" [hidden]="!myForm.valid">
<div formArrayName="items">
<div *ngFor="let address of secondForm.get('items')['controls']; let i=index">
<div>
<label>Email Template - {{i + 1}}</label>
<span *ngIf="secondForm.controls.items.controls.length > 1" (click)="removeAddress(i)"> Remove
</span>
</div>
<editworkflow [groups]="secondForm.controls.items.controls[i]"></editworkflow>
</div>
</div>
<a (click)="addAddress()">
Create More Email Template
</a>
<div>
<div>
<button nbButton type="submit" [disabled]="!secondForm.valid">Confirm</button>
</div>
</div>
</form>
这是父组件打字稿文件。
ngOnint(){
this.usermodel.items = this.items /*my array of object which i am getting
from services*/
this.secondForm = this._fb.group({
items: this._fb.array([
this.initAddress(),
])
});
}
initAddress() {
return this._fb.group({
EmailType: [this.usermodel.items.name, Validators.required],
name: [this.usermodel.items.name, Validators.required],
subject: [this.usermodel.items.template.subject, Validators.required],
'from': [this.usermodel.items.template.from, [Validators.required, ValidationService.emailValidator]],
'body': [this.usermodel.items.template.body, [Validators.required]],
'active': [],
'confidential': [],
'numberOfDaysToWait': ['', Validators.required],
'sequentialOrder': ['', Validators.required]
});
}
addAddress() {
// add address to the list
const control = <FormArray>this.secondForm.controls['items'];
control.push(this.initAddress());
}
removeAddress(i: number) {
// remove address from the list
const control = <FormArray>this.secondForm.controls['items'];
control.removeAt(i);
}
我的对象数组将如下所示。
"items": [
{
"template": {
"name": "Series 1 email",
"from": "TEAMGMG",
"subject": "GROUP2 - SERIES1 - EMAIL",
"body": "<html><body><strong>My test email</strong></body></html>",
"confidential": true,
"active": true
},
"sequentialOrder": 1,
"numberOfDaysToWait": 0,
"name": "Test email sequence 1",
"description": "Test email GROUP 2 sequence 1 - description"
}, {
"template": {
"name": "Series 2 email",
"from": "TEAMGMG",
"subject": "GROUP2 - SERIES2 - EMAIL",
"body": "<html><body><strong>My test email2</strong></body></html>",
"confidential": true,
"active": true
},
"sequentialOrder": 2,
"numberOfDaysToWait": 10,
"name": "Test email sequence 2",
"description": "Test email sequence 2 - description"
}
]
}]
解决方案
您可以创建一个接收“数据”或 null 的函数并返回一个 FormGroup
addAddress(data:any) {
//if received a null, create a data with the necesary properties
data=data||{template:{from:'',:'',name:'',subject:'',...},sequentialOrder:0,...}
return this._fb.group({
EmailType: [data.template.from, Validators.required],
name: [data.template.name, Validators.required],
subject: [data.template.subject, Validators.required],
'from': [data.template.from, [Validators.required, ValidationService.emailValidator]],
'body': [data.template.body, [Validators.required]],
'active': [data.template.active],
'confidential': [data.template.confidential],
'numberOfDaysToWait': [data.numberOfDaysToWait, Validators.required],
'sequentialOrder': [data.sequentialOrder, Validators.required]
});
}
因此,您可以使用
control.push(this.addAddress(null));
//or
control.push(this.addAddress(data));
您可以在 ngOnInit 上使用
this.usermodel.items = this.items
this.secondForm = this._fb.group({
items: this._fb.array(items.map(data=>this.addAddress(data))
});
}
items.map,将您的项目数组转换为formGroup数组
推荐阅读
- yii2 - 将 TCPDF 与 Yii2 一起使用时,HeadersAlready 已发送错误
- java - 在以 jar/war 运行的 Spring Boot 应用程序中,JAXB 解组非常慢
- typescript - 如何使用 vue-test-utils 和 Jest 在 Nuxt 中对使用 vuex-module-decorators 语法定义的 Vuex 模块进行单元测试?
- python - 有没有办法通过多个参数拆分字符串而不是获取 TypeError: 'str' object cannot be mapped as an integer?
- nginx - 如何通过网关处理多个后端 api 调用以进行单个 rest 调用
- php - 如何在子目录中使用 Index.php
- spring-data-elasticsearch - 如何获取文档的 _version 的当前值
- controller - 为什么我无法连接到 Ctrl?
- c++ - 如何转换从 C++ 中的函数返回的对象
- excel - SAPUI5 - 从 Excel 读取 CSV 文件时出错 - ANSI