Angular 反应形式6
我是一个新手 下面是我遇到一些问题的表单的html标记Angular 反应形式6,angular,Angular,我是一个新手 下面是我遇到一些问题的表单的html标记 <form [formGroup]="detailsForm"> <div class="row parent-row" *ngFor="let row of formData;"> <input class="input-lg parent-input-primary" placeholder="{{row.first }} formControlName ={{row.first}}
<form [formGroup]="detailsForm">
<div class="row parent-row" *ngFor="let row of formData;">
<input class="input-lg parent-input-primary" placeholder="{{row.first }} formControlName ={{row.first}}" />
<input class="input-lg parent-input-secondary" placeholder="{{row.second }} formControlName ={{row.second}}" />
</div>
</form>
这里第一个和第二个是动态字符串,在整个表单中是唯一的。
我需要使用如下模块初始化表单:
detaislForm = FormGroup;
this.detailsForm = new FormGroup({
//here I need to write something to init FormControl here, so that angular knows formControls by first and second variables of FormData
}
);
您能给我推荐一种通过此方法在formGroup中插入formcontrols的方法吗?在此处使用表单数组:
参考资料-->
TS:
HTML:
detaislForm = FormGroup;
this.detailsForm = new FormGroup({
//here I need to write something to init FormControl here, so that angular knows formControls by first and second variables of FormData
}
);
formData: any[] = [
{
first: 'business-name',
second: 'business-type',
},
{
first: 'contact-mobile',
second: 'purpose',
}
]
detailsForm: FormGroup;
constructor(private _fb: FormBuilder) {
}
ngOnInit() {
this.detailsForm = this._fb.group({
formData: this._fb.array([])
});
for (let data of this.formData) {
this.addValue(data);
}
}
createFormArray(data) {
return this._fb.group({
first: data.first,
second: data.second
})
}
addValue(data) {
this.getData().push(this.createFormArray(data));
}
getData() {
return this.detailsForm.controls.formData as FormArray
}
<form [formGroup]="detailsForm">
<div formArrayName="formData">
<div *ngFor="let row of detailsForm.get('formData').controls; let i = index;" [formGroupName]="i">
<input class="input-lg parent-input-primary" placeholder="first" formControlName="first" />
<input class="input-lg parent-input-secondary" placeholder="second" formControlName="second" />
</div>
</div>
</form>