So, I have a JSON object:
product:{
"proId":17,
"cliId":1,
"proCode":"test",
"proNome":"test",
"proDescription":"TESTE",
"values":[
{"pfvId":38,
"proId":17,
"pfvQuantiMin":12,
"pfvQuantiMax":15,
"pfvValue":13.5},
{"pfvId":39,
"proId":17,
"pfvQuantiMin":11,
"pfvQuantiMax":14,
"pfvValue":23.5},
]
}
When I register a new product, I can create 1 or infinite values
so I made a reactive form;
that’s ok… simple…
But now I have to make an edit form - I’ve made a modal and passaed product as a parameter on (click).
In this edit form my user can add a new values
if it was needed
I pass the product as a parameter for that form but I was struggling in the values
part of this form.
I need to repeat the form part according my param… if I have 5 values
, I need to have a 5 subforms nested my product form.
–
I set the values on my formbuilder this way:
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { Validators, FormGroup, FormArray, FormBuilder } from '@angular/forms';
import { ProductService } from '../../providers/product-service';
import { Http , Headers} from '@angular/http';
/**
* Generated class for the EditProductModalPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-edit-product-modal',
templateUrl: 'edit-product-modal.html',
})
export class EditProductModalPage {
product:any;
public productForm: FormGroup;
constructor(public navCtrl: NavController, public navParams: NavParams,public viewCtrl: ViewController, private formBuilder: FormBuilder, public http: Http, ) {
this.product = navParams.get('product');
/*Here comes my first data, I can bind that on the form*/
this.productForm = this.formBuilder.group({
proCodigo: [this.product.proCodigo, [Validators.required, Validators.required]],
proNome: [ this.product.proNome, [Validators.required, Validators.required]],
proId: this.product.proId,
cliId:1,
proDescricao: [this.product.proDescricao, [Validators.required, Validators.required]],
faixasValor: this.formBuilder.group([
this.initFaixas(),
])
});
}
/*Here comes the VALUES data, I know that the [0] takes the first position in the array but I need to repeat that in the view based in how many VALUES my product have, I'm struggling here*/
initFaixas() {
return this.formBuilder.group({
pfvQuantiMin:[this.product.faixasValor[0].pfvQuantiMin, [Validators.required, Validators.required]] ,
pfvId:null,
proId:null,
pfvQuantiMax: [this.product.faixasValor[0].pfvQuantiMax, [Validators.required, Validators.required]] ,
pfvValor: [this.product.faixasValor[0].pfvValor, [Validators.required, Validators.required]]
});
}
/*Here I create a new blank VALUES as the object I said before*/
initFaixasNew(){
return this.formBuilder.group({
pfvQuantiMin:["", [Validators.required, Validators.required]] ,
pfvId:null,
proId:null,
pfvQuantiMax:[ "", [Validators.required, Validators.required]] ,
pfvValor: ["", [Validators.required, Validators.required]]
});
}
addFaixa() {
const control = <FormArray>this.productForm.controls['faixasValor'];
control.push(this.initFaixasNew());
}
removeFaixa(i: number) {
const control = <FormArray>this.productForm.controls['faixasValor'];
control.removeAt(i);
}
closeModal(){
this.viewCtrl.dismiss();
}
/*REQUEST*/
editProduct(productForm) {
this.http.post(MYURL, (productForm.value))
.map(res => res)
.subscribe(data => console.log(data));
this.closeModal();
}
}
and here is my HTML
<ion-header>
<ion-navbar color="secondary">
<ion-title>{{product.proNome}}</ion-title>
<ion-buttons end>
<button ion-button (click)="closeModal()">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-card>
<ion-card-content>
<form [formGroup]="productForm" novalidate>
<ion-item>
<ion-label floating>CĂłdigo Auxiliar</ion-label>
<ion-input type="text" formControlName="proCodigo"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Nome do Produto</ion-label>
<ion-input type="text" formControlName="proNome"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Descrição do produto</ion-label>
<ion-input type="text" formControlName="proDescricao"></ion-input>
</ion-item>
<div formArrayName="faixasValor">
<!--I NEED TO REPEAT THIS PART BASED ON HOW MANY JSON PARAMETER 'VALUES' MY OBJECT HAVE -->
<ion-row style="border:1px solid #DBDBDB; border-radius: 5px; margin-top: 10px; padding: 3px;" *ngFor="let faixas of productForm.controls.faixasValor.controls; let i=index">
<ion-row style="width: 100%; padding: 2%;">
<ion-col><span>Faixa {{i + 1}}</span></ion-col>
<ion-col>
<button ion-button clear style="float: right; margin-top: 10px;" *ngIf="productForm.controls.faixasValor.controls.length > 1" (click)="removeFaixa(i)">
<ion-icon name="close"></ion-icon>
</button>
</ion-col>
</ion-row>
<ion-row [formGroupName]="i">
<ion-col col-12 col-sm-9 col-md-6 col-lg-4 col-xl-4>
<ion-item>
<ion-label floating>Quantidade MĂnima</ion-label>
<ion-input type="number" formControlName="pfvQuantiMin"></ion-input>
</ion-item>
</ion-col>
<ion-col col-12 col-sm-9 col-md-6 col-lg-4 col-xl-4>
<ion-item>
<ion-label floating>Quantidade Máxima</ion-label>
<ion-input type="number" formControlName="pfvQuantiMax"></ion-input>
</ion-item>
</ion-col>
<ion-col col-12 col-sm-9 col-md-6 col-lg-4 col-xl-4>
<ion-item>
<ion-label floating>Valor</ion-label>
<ion-input type="text" formControlName="pfvValor"></ion-input>
</ion-item>
</ion-col>
</ion-row>
</ion-row>
</div>
<ion-row>
<ion-col><button ion-button color="primary" style="margin-top: 10px;" (click)="addFaixa()" clear>+ Faixa de Valor</button></ion-col>
<ion-col><button ion-button [disabled]="!productForm.valid" color="secondary" style="float: right; margin-top: 10px;" type="submit"
color="secondary" (click)="editProduct(productForm)">Salvar Edição</button></ion-col>
</ion-row>
</form>
<hr>
</ion-card-content>
<pre>form value: <br>{{productForm.value | json}}</pre>
</ion-card>
</ion-content>
Here some images to better understanding:
Can someone help me to make this loop and set the values dinamically on my formbuilder?