Я новичок в ionic,
Я хочу установить динамические поля ввода в свою форму, Вот мой код, но я не могу установить
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_array);
}
AddItemData(item) {
const arrayControl = < FormArray > this.myForm1.controls['deck_array'];
let newGroup = this._fb.group({
selectedDeck: item
});
arrayControl.push(newGroup);
}
Полученные мной данные сервера:
pData = {
"ship_owner_name": "john smith",
"deck_array": [
"MD 1",
"MD 2"
],
}
Код для шаблона 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>
Пожалуйста, помогите и заранее спасибо





Есть несколько проблем с вашей реализацией.
Для начала, вы делаете deck_array в форме FormArray из FormGroup, тогда как это должен быть FormArray из FormControl.
Во-вторых, вы не получите такую ссылку на desk_array: <FormArray>this.myForm1.controls['deck_array'];
В-третьих, я не совсем уверен, откуда вы берете _fb, если вы не вводили его в свой constructor.
В-четвертых, вы должны сделать свой constructor как можно более компактным. Таким образом, весь код для получения данных с сервера, создания экземпляра формы и установки его значения должен находиться внутри ngOnInit.
В-пятых, вы должны создать геттер в своем классе машинописного текста, который даст вам FormArraycontrols. Кроме того, вы должны использовать [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.info(this.myForm1.value);
}
AddItemData(item) {
const arrayControl = (<FormArray>this.myForm1.get('deck_array'));
console.info(this.pData.deck_array);
const controls = this.pData.deck_array.map(value => this._fb.control(value));
console.info(controls);
controls.forEach(control => arrayControl.push(control));
}
get controlsArray() {
return (<FormArray>this.myForm1.get('deck_array')).controls;
}
}
А затем в вашем шаблоне измените:
<ion-list *ngFor = "let obj of myForm1.controls.deck_array.controls;let i=index">
к
<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>
Вот Образец StackBlitz для вашей справки.
Обновил ответ. Пожалуйста, проверьте.
Вы не должны использовать formGroup, поскольку это formControl. Я обновил ответ соответственно.
Позвольте нам продолжить обсуждение в чате.
внутри 'AddItemData () {const arrayControl = (<FormArray> this.myForm1.get (' deck_array ')); const controls = item.map (значение => arrayControl.push (значение)); 'Почему я не могу напрямую использовать значения?
Вероятно, ваш
this.pDataеще не получен. Убедитесь, что вашthis.pDataполучен с сервера, и только тогда вы должны попробовать создать форму. Или вы можете создать форму и получить данные из вызовов AJAX параллельно, а затем вызватьsetValueилиpatchValueв форме.