我正在尝试验证从数组对象动态创建的单选按钮组,我希望以以下形式对其进行验证:我已经发布了一个问题寻求答案,但我没有弄清楚,再次进行了一些研究,发现了这一点文章紧随其后,找到了formArrayName但无法实现验证
<form[formGroup]="form">
<ion-select formControlName="type">
<ion-option value="1">Full Time</ion-option>
<ion-option value="2">Part Time</ion-option>
</ion-select>
<div formArrayName="employee_details">
<ion-row class="rows" *ngFor="let employee of employee; let rowIndex = index">
<ion-col text-center="text-center" col-6="col-6">
[ {{employee.id}} ]
<br> {{employee.name}}
</ion-col>
<ion-col class="rows last" col-6="col-6">
<ion-list class="row" no-lines="no-lines" radio-group="radio-group">
<ion-item col-4="col-4">
<ion-radio class="radio " mode="md" value="Paid"></ion-radio>
</ion-item>
<ion-item col-4="col-4">
<ion-radio class="radio " mode="md" value="Unpaid"></ion-radio>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
</div>
</form>
JS
import { FormBuilder, FormGroup, FormControl,FormArray, Validators } from '@angular/forms ';
class type {
public name: string;
public id: string;
}
...
class employee {
public name: string;
public id: string;
}
...
employee: employee = [{
id: 1,
name: "emp1"
}, {
id: 2,
name: "emp2"
}, {
id: 3,
name: "emp3"
}];
form: FormGroup;
this.form = new FormGroup({
'type': new FormControl(null, [Validators.required]),
'employee_details': new FormArray([])
});
Object.keys(this.employee).forEach(function(key, index) {
console.log(key);
// problem is here
const control = new FormControl(null, Validators.required);
( < FormArray > this.form.get('employee_details')).push(control);
});
答案 0 :(得分:1)
您可以简单地@Controller
public class CustomErrorController implements ErrorController {
@RequestMapping("/error")
public String handleError(HttpServletRequest req, Model model) {
// Logic omitted
return "errorView"
}
@Override
public String getErrorPath() {
return "/error";
}
}
遍历数组,然后为每个元素创建一个map
尝试一下:
FormControl
答案 1 :(得分:1)
这不是formArray,但绝对可以帮助您。
.html
<form [formGroup]="form">
<ion-row class="rows" *ngFor="let detail of details; let i = index">
<ion-col text-center="text-center" col-6="col-6">
{{your_data}}
</ion-col>
<ion-col class="rows last" col-6="col-6">
<ion-list class="row" no-lines="no-lines" radio-group="radio-group" formControlName="action{{i}}">
<ion-item col-4>
<ion-radio class="radio true" mode="md" value="true"></ion-radio>
</ion-item>
<ion-item col-4>
<ion-radio class="radio false" mode="md" value="false"></ion-radio>
</ion-item>
<ion-item col-4>
<ion-radio class="radio " mode="md" value="not sure"></ion-radio>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
<button ion-button (click)="submit()" [disabled]="!form.valid">Submit</button>
</form>
.ts 在获取数据的地方添加此代码。
let i;
for(i in this.details){
this.form.setControl('action'+i, new FormControl('', Validators.required));
}
变量“ i”仅用于产生0、1、2、3并添加控件名称。您可以使用自己的方式执行此操作,但是需要循环。