мой объект продукта, содержащий массив, готов на стороне клиента следующим образом:
public product =>> require: [{ id: 397, product_id: 51, item: "asdasdd" },{ id: 398, product_id: 51, item: "bbbbbb" }]
для редактирования существующих данных я хочу добавить элемент в мой ввод формы при инициализации формы (я должен вводить данные для каждого элемента)
как добавить мой элемент к этому... я написал цикл for, чтобы добавить элемент в форму, которую вы можете видеть ниже, но это не работает
это моя форма:
public product;
public requirementForm: FormGroup;
constructor(private _store: StoreService, private fb: FormBuilder) {
this.createForm();
}
createForm() {
this.requirementForm = this.fb.group({
itemRows: this.fb.array([])
});
this.requirementForm.setControl('itemRows', this.fb.array([]));
}
ngOnInit() {
this.requirementForm.setControl('itemRows', this.fb.array([]));
this.requirementForm = this.fb.group({
itemRows: this.fb.array([this.initItemRows()])
});
this._store.ownersingleView(this.pid).subscribe((data: any) => {
this.product = data;
**for (let i = 0; i < data.require.length; i++) {
const control = <FormArray>this.requirementForm.controls['itemRows'];
control.push(this.initItemRows());
this.requirementForm.controls['itemRows'].controls['itemname'].setValue(this.product.require[i].item, {onlySelf: true});
}**
})
}
initItemRows() {
return this.fb.group({
itemname: ['']
});
}
addNewRow() {
const control = <FormArray>this.requirementForm.controls['itemRows'];
control.push(this.initItemRows());
}
HTML-форма:
<div class="row">
<div class="col s12 m12 l12">
<form [formGroup]="requirementForm">
<div formArrayName="itemRows">
<div class="item_x">
<div [@itemAnim]="true" class="item_in"
*ngFor="let itemrow of requirementForm.controls.itemRows.controls; let i=index"
[formGroupName]="i">
<div class="i-in">
<div class="requirement_item">
<h6>نیازمندی #{{ i + 1 }}</h6>
<div class="form-group">
<label>نام آیتم</label>
<input formControlName="itemname" class="form-control">
</div>
</div>
<div class="requirement_x">
<div class="requirment_del">
<div class="rdc">
<button *ngIf="requirementForm.controls.itemRows.controls.length > 1" (click)="deleteRow(i)"
mat-mini-fab=""><i class="mdi mdi-delete"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="action">
<div class="action_i">
<div class="ac_in">
<button mat-mini-fab color="primary" (click)="addNewRow()"><i class="mdi mdi-plus"></i></button>
</div>
</div>
</div>
</form>
</div>
</div>