CODEWITHSUNDEEP
angular
lliance
lliance

Reputation: 47

populate array into input box Angular

I'm working on a task I'm assigned to generated 10 different input forms and create an array of 10 users and loop them to fill the input box with Angular.

So at the end of the day, I'll have 10 input forms containing the array of data

but im getting only the last data in the array information in all the forms.

preview here preview

contactForm.component.html

<div*ngFor="let item of info">
  <form class="form-signin form" [formGroup]="kForm" (ngSubmit)="onSubmit($event)" >

    <div class="form-label-group">
      <input type="email" id="inputName" class="form-control" placeholder="Name" formControlName="name" autofocus #name [(ngModel)]="item.name"  >
      <label for="inputName">Name</label>
    </div>

    <div class="form-label-group">
      <input type="email" id="inputEmail" class="form-control" placeholder="Email address" formControlName="email"
        autofocus #email [(ngModel)]="item.email" >
      <label for="inputEmail">Email address</label>
    </div>

    <div class="form-label-group">
      <input type="text" id="inputPhone" class="form-control" placeholder="phone" formControlName="phone" #phone [(ngModel)]="item.phone">
      <label for="inputPhone">Phone</label>
    </div>

    <div class="form-label-group">
      <input type="text" id="inputCountry" class="form-control" placeholder="country" formControlName="country"
        #country [(ngModel)]="item.country" >
      <label for="inputCountry">Country</label>
    </div> 
</div>
</div>

contactForm.component.ts

@Input('theData') data: Contact
  constructor(private fb: FormBuilder,
     private contactInfo: ContactInfoService) {
    }

  ngOnInit() {
      this.kForm = this.fb.group({
      name: [null, [Validators.required]],
      email: [null, [Validators.required]],
      phone: [null, [Validators.required]],
      country: [null, [Validators.required]]
    })
    this.info= this.contactInfo.information;
   }

conatct.service.ts 

data: any[];
constructor() { }


information = [
{
  name: "lamar",
  email: "[email protected]",
  phone: "023232349403",
  country: "USA",
},
{
  name: "John doe",
  email: "[email protected]",
  phone: "023232349403",
  country: "canada",
},
{
  name: "sam doe",
  email: "[email protected]",
  phone: "032322349403",
  country: "China",
},
{
  name: "dan doe",
  email: "[email protected]",
  phone: "023232349403",
  country: "China",
},
{
  name: "anne drick",
  email: "[email protected]",
  phone: "023232349403",
  country: "UK",
},
{
  name: "Vals",
  email: "[email protected]",
  phone: "023232349403",
  country: "Singapore",
},
{
  name: "daniel crunch",
  email: "[email protected]",
  phone: "023232349403",
  country: "Guinea",
},
{
  name: "bevelo",
  email: "[email protected]",
  phone: "023232349403",
  country: "indonesia",
},
{
  name: "andreas",
  email: "[email protected]",
  phone: "023232349403",
  country: "Germany",
},
{
  name: "mavis",
  email: "[email protected]",
  phone: "023232349403",
  country: "London",
},


];


  triggerMe() {
    console.log("trigger me !");
    this.data = this.information;
    console.log(this.data);
  }

Upvotes: 1

Views: 1701

Answers (2)

Kari F.
Kari F.

Reputation: 1434

You don't need to create any new components. What you need is a FormArray which contains a nested FormGroup for the contact fields. Check the Stackblitz I made based on your code: https://stackblitz.com/edit/angular-svp7no.

The main point there is that you have to create a FormArray and populate it with existing data in your .ts file. I added also an example of how to add new contacts:


  constructor(private fb: FormBuilder) {}

  // this getter helps to reference the nested array so that you don't have to write every time the whole "this.kform.get...." etc
  get contacts(): FormArray {
    return <FormArray>this.kForm.get('contactsArray');
  }

  ngOnInit() {
    this.kForm = this.fb.group({
      contactsArray: this.fb.array([])
    });
    this.info = this.information;
    this.info.forEach(contact => {
      this.addContact(contact)
    })
  }

  addContact(contact: any) {
    this.contacts.push(this.createContactGroup(contact));
  }

  addNewContact() {
    this.addContact({ name: null, email: null, phone: null, country: null});
  }

  createContactGroup(contact: any): FormGroup {
    return this.fb.group({  
      name: [contact.name, [Validators.required]],
      email: [contact.email, [Validators.required]],
      phone: [contact.phone, [Validators.required]],
      country: [contact.country, [Validators.required]]
    })
  }

Then in your template you can reference the array and the nested form group:

<form [formGroup]="kForm" (ngSubmit)="onSubmit($event)">

  <div formArrayName="contactsArray" *ngFor="let contact of contacts.controls; let i = index">
    <div [formGroupName]="i">
      <div>
        <label for="inputName">Name: </label>
        <input type="email" placeholder="Name" formControlName="name" autofocus>
      </div>

So you almost had it already ;) Feel free to ask if you have any doubts. BTW, you were mixing Template driven forms and ReactiveForms. My example is a ReactiveForm. I removed any innecessary references to template driven forms.

Upvotes: 0

Andrii Gordiichuk
Andrii Gordiichuk

Reputation: 1947

You need to create a separate form component. Please check: - Template-driven forms from - https://angular.io/guide/forms and using within https://angular.io/guide/reactive-forms - This articles will help you - https://coryrylan.com/blog/building-reusable-forms-in-angular and https://coryrylan.com/blog/angular-form-builder-and-validation-management

After that in your main component, you will iterate by "information" data and in template will use something like this:

<div*ngFor="let item of info">
  <form class="form-signin form" [formGroup]="klloydForm" (ngSubmit)="onSubmit($event)" >
  <profile-address-form formControlName="profile"></profile-address-form>
</div>

Upvotes: 1

Related Questions