Bdtjtk

There is a button that users can click which will add more address form fields. If users fill out their address information in the fields and then click the button to add more addresses, the previous inputs get cleared. How can I prevent the button from clearing previous entries?

Snippets from my component.ts file:

  ngOnInit() {

     this.addresses = ;

     this.addresses.push(new Address('', undefined ,'','Canada',''));

  }



  addAddress(){

    this.addresses.push(new Address('', undefined ,'','Canada',''));

  }

My address.ts file:

export class Address {



    constructor(

        public streetAddress: string,

        public province: string,

        public city: string,

        public country: string,

        public postalCode: string

    ) {  }

 }

Snippets from my component.html file:

<div class="card-body"  *ngFor="let address of addresses">

  <div class="row">



    <div class="col-md-6">

      <div class="form-group">



        <input type="text" class="form-control" 

        [(ngModel)]="address.streetAddress" #streetAddress="ngModel" 

        name="streetAddress" placeholder="Apartment/House Number and Street 

        Address">



      </div>  

    </div>



    <div class="col-md-6">

      <div class="form-group">



        <input type="text" class="form-control" [(ngModel)]="address.city" 

         #city="ngModel"  name="city" placeholder="City/Town">



      </div>

    </div>



  </div>                           

</div>



<button type="button" class="btn btn-warning btn-block" id="addAddress" 

(click)="addAddress()">More Addresses</button>

Better practice to store and operate data in services

address.service.ts

import { Injectable } from '@angular/core';

import { Address } from './Address';



@Injectable()

export class AddressService {



  constructor() { }



  addresses = ;



  addAddress(address: Address) {

    this.addresses.push(Address);

  }

}

In addAddresses method as argument you can give an Address from submitted form
Also read about how to correctly manage your form here
Your component.ts file can be like:

export class AppComponent implements OnInit {



   addresses: Address;



   form = new FormGroup({

      streetAddress: new FormControl(''),

      province: new FormControl(''),

      city: new FormControl(''),

      country: new FormControl(''),

      postalCode: new FormControl('')

  });

    constructor(private addrs: AddressService) {}



    ngOnInit() { 

      this.addresses = this.addrs.addresses;

    }



    onSubmit() {

      this.addrs.addAddress(this.form.value);

      this.form.reset();

    }

}