Angular 无法设置动态输入字段
我是爱奥尼亚的新手 我想为我的表单设置动态输入字段, 这是我的代码,但我无法设置 home.tsAngular 无法设置动态输入字段,angular,ionic-framework,ionic2,ionic3,angular-reactive-forms,Angular,Ionic Framework,Ionic2,Ionic3,Angular Reactive Forms,我是爱奥尼亚的新手 我想为我的表单设置动态输入字段, 这是我的代码,但我无法设置 home.ts constructor() { pData = //Got data from server; this.myForm1 = this._fb.group({ ship_owner_name: [pData.ship_owner_name], deck_array: this._fb.array([]) }); this.AddItemData(pData.deck_
constructor() {
pData = //Got data from server;
this.myForm1 = this._fb.group({
ship_owner_name: [pData.ship_owner_name],
deck_array: this._fb.array([])
});
this.AddItemData(pData.deck_array);
}
AddItemData(item) {
const arrayControl = < FormArray > this.myForm1.controls['deck_array'];
let newGroup = this._fb.group({
selectedDeck: item
});
arrayControl.push(newGroup);
}
模板代码
home.html
<form [formGroup]="myForm1">
<ion-list no-lines class="listMargin">
<ion-item>
<ion-label class="labelColor" stacked>
Ship owner name
</ion-label>
<ion-input formControlName="ship_owner_name" type="text"></ion-input>
</ion-item>
<div formArrayName="deck_array" style="background-color:white">
<ion-list *ngFor="let obj of myForm1.controls.deck_array.controls;let i=index">
<div [formGroupName]="i" >
<ion-item no-lines>
<ion-input placeholder="select from list or type in"></ion-input>
</ion-item>
</div>
</ion-list>
</div>
</ion-list>
船东姓名
请提前帮助和感谢您的实施中存在一些问题 首先,您正在以
FormGroup
s的FormArray
形式制作deck\u数组
,而它应该是FormControl
s的FormArray
其次,您不会像这样获得desk_array
的引用:this.myForm1.controls['deck_array'代码>
第三,如果没有将\u fb
注入到构造函数中,我真的不确定从哪里获得\u fb
第四,你应该让你的构造器尽可能精干。因此,所有从服务器获取数据、实例化表单并设置其值的代码都应该放在ngOnInit
中
第五,您应该在typescript类中创建一个getter,它将为您提供FormArray
的控件。此外,您应该使用[formControlName]
而不是[formGroupName]
指令将表单绑定到视图
我已经在表单上解决了所有这些问题,现在它按预期工作。这就是我所做的
import { Component } from '@angular/core';
import { FormBuilder, FormArray } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
pData;
myForm1;
constructor(private _fb: FormBuilder) {}
ngOnInit() {
// Suppose that this is obtained by an AJAX Call to the server.
this.pData = {
"ship_owner_name": "john smith",
"deck_array": [
"MD 1",
"MD 2"
],
};
this.myForm1 = this._fb.group({
ship_owner_name: [this.pData.ship_owner_name],
deck_array: this._fb.array([])
});
this.AddItemData(this.pData.deck_array);
console.log(this.myForm1.value);
}
AddItemData(item) {
const arrayControl = (<FormArray>this.myForm1.get('deck_array'));
console.log(this.pData.deck_array);
const controls = this.pData.deck_array.map(value => this._fb.control(value));
console.log(controls);
controls.forEach(control => arrayControl.push(control));
}
get controlsArray() {
return (<FormArray>this.myForm1.get('deck_array')).controls;
}
}
从'@angular/core'导入{Component};
从'@angular/forms'导入{FormBuilder,FormArray};
@组成部分({
选择器:“我的应用程序”,
templateUrl:“./app.component.html”,
样式URL:['./app.component.css']
})
导出类AppComponent{
pData;
myForm1;
构造函数(私有_fb:FormBuilder){}
恩戈尼尼特(){
//假设这是通过对服务器的AJAX调用获得的。
this.pData={
“船东名称”:“约翰·史密斯”,
“甲板阵列”:[
“MD 1”,
“MD 2”
],
};
this.myForm1=this.\u fb.group({
船舶所有人名称:[this.pData.ship\u owner\u name],
甲板数组:此.\u fb.array([])
});
this.AddItemData(this.pData.deck_数组);
console.log(this.myForm1.value);
}
AddItemData(项目){
const arrayControl=(this.myForm1.get('deck_array');
console.log(this.pData.deck_数组);
const controls=this.pData.deck_array.map(值=>this._fb.control(值));
控制台日志(控制);
controls.forEach(control=>arrayControl.push(control));
}
获取controlsArray(){
return(this.myForm1.get('deck_数组')).controls;
}
}
然后在模板中,更改:
<ion-list *ngFor="let obj of myForm1.controls.deck_array.controls;let i=index">
到
以下是您提供的完整模板:
<form [formGroup]="myForm1">
<ion-list no-lines class="listMargin">
<ion-item>
<ion-label class="labelColor" stacked>
Ship owner name
</ion-label>
<ion-input formControlName="ship_owner_name" type="text"></ion-input>
</ion-item>
<div formArrayName="deck_array" style="background-color:white">
<ion-list *ngFor="let obj of controlsArray;let i=index">
<div>
<ion-item no-lines>
<ion-input
[formControlName]="i"
placeholder="select from list or type in"></ion-input>
</ion-item>
</div>
</ion-list>
</div>
</ion-list>
船东姓名
这里有一个供您参考。这可能是因为您的此.pData
尚未获得。确保从服务器获取this.pData
,然后只有您可以尝试创建表单。或者您可以创建表单,并行地从AJAX调用中获取数据,然后在表单上调用setValue
或patchValue
。更新答案。请检查。您不应该使用formGroup,因为它是formControl。我已经相应地更新了答案。让我们在'AddItemData(){const arrayControl=(this.myForm1.get('deck_array'));const controls=item.map(value=>arrayControl.push(value));'中找出为什么我不能直接使用值推送?
<ion-list *ngFor="let obj of controlsArray;let i=index">
<form [formGroup]="myForm1">
<ion-list no-lines class="listMargin">
<ion-item>
<ion-label class="labelColor" stacked>
Ship owner name
</ion-label>
<ion-input formControlName="ship_owner_name" type="text"></ion-input>
</ion-item>
<div formArrayName="deck_array" style="background-color:white">
<ion-list *ngFor="let obj of controlsArray;let i=index">
<div>
<ion-item no-lines>
<ion-input
[formControlName]="i"
placeholder="select from list or type in"></ion-input>
</ion-item>
</div>
</ion-list>
</div>
</ion-list>