заполнить массив в поле ввода Angular

Question

Я работаю над задачей, которую мне поручено сгенерировать 10 различных форм ввода и создать массив из 10 пользователей и l oop их, чтобы заполнить поле ввода с помощью Angular.

Так в конце дня у меня будет 10 форм ввода, содержащих массив данных

, но я получаю только последние данные в массиве информации во всех формах.

предварительный просмотр здесь предварительный просмотр

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: "lamar@gmail.com",
  phone: "023232349403",
  country: "USA",
},
{
  name: "John doe",
  email: "johndoe@gmail.com",
  phone: "023232349403",
  country: "canada",
},
{
  name: "sam doe",
  email: "sam@gmail.com",
  phone: "032322349403",
  country: "China",
},
{
  name: "dan doe",
  email: "dan@gmail.com",
  phone: "023232349403",
  country: "China",
},
{
  name: "anne drick",
  email: "anne@gmail.com",
  phone: "023232349403",
  country: "UK",
},
{
  name: "Vals",
  email: "vals@gmail.com",
  phone: "023232349403",
  country: "Singapore",
},
{
  name: "daniel crunch",
  email: "daniel@gmail.com",
  phone: "023232349403",
  country: "Guinea",
},
{
  name: "bevelo",
  email: "bevelo@gmail.com",
  phone: "023232349403",
  country: "indonesia",
},
{
  name: "andreas",
  email: "andreas@gmail.com",
  phone: "023232349403",
  country: "Germany",
},
{
  name: "mavis",
  email: "mavis@gmail.com",
  phone: "023232349403",
  country: "London",
},


];


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

Answer 1

Вам необходимо создать отдельный компонент формы. Пожалуйста, проверьте: - Формы на основе шаблонов от - https://angular.io/guide/forms и использование в пределах https://angular.io/guide/reactive-forms - Эти статьи помогут вам - https://coryrylan.com/blog/building-reusable-forms-in-angular и https://coryrylan.com/blog/angular-form-builder-and-validation-management

После этого в вашем основном компоненте вы будете выполнять итерацию по «информационным» данным и в шаблоне будете использовать что-то вроде этого:

<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>

Answer 2

Вам не нужно создавать какие-либо новые компоненты. Вам нужен FormArray, который содержит вложенный FormGroup для полей контакта. Проверьте Stackblitz, который я сделал на основе вашего кода: https://stackblitz.com/edit/angular-svp7no.

Главное, что вам нужно создать FormArray и заполнить его существующими данными в вашем .ts файл. Я добавил также пример того, как добавить новые контакты:

  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]]
    })
  }

Затем в вашем шаблоне вы можете ссылаться на массив и группу вложенных форм:

<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>

Так что у вас это почти получилось уже;) Не стесняйтесь спрашивать, если у вас есть какие-либо сомнения. Кстати, вы смешивали управляемые шаблоном формы и ReactiveForms. Мой пример - ReactiveForm. Я удалил все ненужные ссылки на формы, управляемые шаблонами.