how to push form submission data to an array

Question

I am using angular version 9. And i created one form with 5 fields called full name,email,phone,company,address. I am using ngForm directive in my form to get the submitted data on every submission and handling a ngSubmit event to get the form data. But i am not able to add that object to an array. how to achieve that? Here is my code...

import { Component, OnInit } from '@angular/core';
import { NgForm, EmailValidator } from '@angular/forms';
import { ContactListService } from '../contact-list.service';
import { JsonPipe } from '@angular/common';

@Component({
  selector: 'app-new-contact',
  templateUrl:'./new-contact.component.html',
  styleUrls: ['./new-contact.component.css']
})
export class NewContactComponent implements OnInit {

  constructor(private contactList: ContactListService) { }

  arraydata:formData[];
  ngOnInit(): void {
  }
  data(f:NgForm){
  this.arraydata.push(f.value);
  }
}

interface formData{
  fullName:string;
  email:string;
  phone:number;
  company:string;
  address:string;
}

<form #f="ngForm" (ngSubmit)="data(f)">
    <div class="form-group row">
        <label for="fullName" class="col-sm-2 col-form-label">Full Name</label>
        <div class="col-sm-10">
            <input type="text" required ngModel name="fullName" name="fullName" class="form-control"
                id="fullName" placeholder="Please Enter Your Full Name">
        </div>
    </div>
    <div class="form-group row">
        <label for="email" class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
            <input type="email" required ngModel name="email" name="email" class="form-control" id="email"
                placeholder="Please Enter Your Email">
        </div>
    </div>
    <div class="form-group row">
        <label for="phone" class="col-sm-2 col-form-label">Phone</label>
        <div class="col-sm-10">
            <input type="number" required ngModel name="phone" name="phone" class="form-control" id="phone"
                placeholder="Please Enter Your Phone Number">
        </div>
    </div>
    <div class="form-group row">
        <label for="company" class="col-sm-2 col-form-label">Company</label>
        <div class="col-sm-10">
            <input type="text" required ngModel name="company" name="company" class="form-control"
                id="company" placeholder="Please Enter Your Company Name">
        </div>
    </div>
    <div class="form-group row">
        <label for="address" class="col-sm-2 col-form-label">Address</label>
        <div class="col-sm-10">
            <input type="text" required ngModel name="address" name="address" class="form-control"
                id="address" placeholder="Please Enter Your Address">
        </div>
    </div>
    <button style="float:right" class="btn btn-primary">Create</button>
</form>

Sayooj V R · Accepted Answer · 2020-04-09 12:45:30Z

1

You haven't initialized the array arraydata.So it is undefined in your component.

Simply initialize the arraydata to an empty array like this

arraydata:formData[] =[]

answered Apr 9, 2020 at 12:45

Sayooj V R

2,3652 gold badges14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gaurang Dhorda · Accepted Answer · 2020-04-09 12:40:42Z

1

Working Demo StackBlitz Link

just assign formData with empty array...

  arraydata:FormData [] = [];

then everything working fine..

answered Apr 9, 2020 at 12:40

Gaurang Dhorda

3,4072 gold badges24 silver badges26 bronze badges

Collectives™ on Stack Overflow

how to push form submission data to an array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related