How to create an json array in angular 4 for post my form

Question

This is my code :-

 <form>

<div class="col-md-4">
  <input type="text" [(ngModel)]="quantity.quantity" name="quantity" class="form-control" placeholder="Quantity">
</div>

<div class="col-md-4">
  <input type="text" [(ngModel)]="size.size" name="size" class="form-control" placeholder="Size">
</div>

<div class="col-md-4">
  <input type="text" [(ngModel)]="brand.brand" name="brand" class="form-control" placeholder="Brand">
</div>

This is my model file in angular 4 to make an array:-

     export class BoQuotes {
    note: string;
    city: string;
    name: string;
    email: string;
    phone_number: string;
    message: string
    userId: string;
    quotes: Array<BoQuote> = new Array<BoQuote>();
}

    export class BoQuote {
    brand: string = "";
    size: string = "";
    quantity: string = "";


}

This is my component:-

  addItem() {
var retrievedData = localStorage.getItem("userId");
var loggdinUser = JSON.parse(retrievedData);
this.item.userId = loggdinUser[0]._id;
this.item.quotes.push(this.quantity);
this.item.quotes.push(this.brand);
this.item.quotes.push(this.size);
U.log("Item to be add : " + JSON.stringify(this.item));
if (!this.item.userId) {
  return;
}
// let isValid = $('#form').parsley().isValid();
// if (isValid) {
this.quotesService.addItem(this.item).subscribe(
  data => {
    U.log("Success:-" + JSON.stringify(data));
    window.location.reload();
  },
  err => {
    U.log("err1 : " + JSON.stringify(err));
    // this.router.navigateByUrl('/dashboard')
  }
);
//}

}

Need this type of jason array for save in db|:-

[
    {
        "size": "25 mm",
        "quantity": "20",
        "price": "111111",
        "brand": "tvs"
    },
    {
        "size": "24 mm",
        "quantity": "10",
        "price": "22222",
        "brand": "atlash"
    },
    {
        "size": "35 mm",
        "quantity": "30",
        "price": "3333",
        "brand": "hp"
    }
]

You need an array. If you choose reactive Forms check stackoverflow.com/questions/48135963/… — Eliseo
– Eliseo, Commented Jan 8, 2018 at 10:19

Manish chauhan · Accepted Answer · 2018-01-16 12:59:24Z

Hi final i have solve my problem using reactive form FormArray,FormGroup

Here is the code :

create object of Form qouteForm: FormGroup;

Component file:

 private initForm() {
let note = '';
let city = '';
let name = '';
let email = '';
let phone_number = '';
let message = '';
let userId = '';
let quotesArr = new FormArray([]);

this.qouteForm = new FormGroup({
  'note': new FormControl(note, Validators.required),
  'city': new FormControl(city, Validators.required),
  'name': new FormControl(name, Validators.required),
  'email': new FormControl(email, Validators.required),
  'phone_number': new FormControl(phone_number, Validators.required),
  'message': new FormControl(message, Validators.required),
  'userId': new FormControl(userId, Validators.required),
  'quotes': quotesArr
});

}

 onAddRow() {
(<FormArray>this.qouteForm.get('quotes')).push(
  new FormGroup({
    'quantity': new FormControl(null, Validators.required),
    'size': new FormControl(null, Validators.required),
    'brand': new FormControl(null, Validators.required)
  })
);

}

Model file:

export class BoQuotes {
note: string;
city: string;
name: string;
email: string;
phone_number: string;
message: string
userId: string;
quotes: BoQuote[];

}

export class BoQuote {
constructor(public brand: string, public size: string, public quantity: string) { }

}

Collectives™ on Stack Overflow

How to create an json array in angular 4 for post my form

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related