Angular getting from forms arrays

Question

I'm making CRUD app in angular 6 but when i go to edit page i want to pass data from array to the input fields on that page, but when i save that page data should be again in the array (you can see on pictures) because i have to save it like a array. Also i have tryed to work with contact.email[i] but after that i don't know how to put them inside one array and that is email. Can anyone help me with this please? Here is my picture i want to look like this and my code...

//Edit page component
export class EditComponent implements OnInit {
  contact$: Observable<IContact>;
  contactForm = this.fb.group({});
  formSubmitted = false;

   constructor( private contactService: ContactService,
     private route: ActivatedRoute,
     private router: Router,
     private fb: FormBuilder) {}

   ngOnInit() {
   this.contactForm.addControl('first_name', new FormControl(''),[Validators.required]);
   this.contactForm.addControl('last_name', new FormControl(''));
   this.contactForm.addControl('email', new FormControl('', [Validators.required]));
   this.contactForm.addControl('phone', new FormControl('', [Validators.required]));
   this.contactForm.addControl('id', new FormControl(''));

   //getting id from url from home page and subscibe it to new contact$
   this.contact$ = this.route.paramMap.pipe(
   switchMap((params: ParamMap) => 
   this.contactService.getContactById(Number.parseInt(params.get('id')))));

   this.contact$.subscribe(contact => {
    if(!isNullOrUndefined(contact)){
    console.log(contact);
              
    this.contactForm.get('first_name').setValue(contact.first_name);           
    this.contactForm.get('last_name').setValue(contact.last_name);
    this.contactForm.get('phone').setValue(contact.phone);
    this.contactForm.get('id').setValue(contact.id);
               
    **//i want to take separate this array and put it in the 2 array then again put back into one when i** 
    want to save it
    this.contactForm.get('email').setValue(contact.email);
    };
   });
  };

  save($event):void{
   if(!this.contactForm.valid){
   return;
  };
   this.formSubmitted = true;
   this.saveContact();
   this.router.navigate((['/home']));
  };

  private saveContact(){
  const contact$ = new Contact();

  contact$.id = this.contactForm.get('id').value;
  contact$.first_name = this.contactForm.get('first_name').value;
  contact$.last_name = this.contactForm.get('last_name').value;
  contact$.email = this.contactForm.get('email').value;
  contact$.phone = this.contactForm.get('phone').value;

  if(contact$.id == 0){
   this.contactService.addNewContact(contact$);
    }else {
   this.contactService.updateContact(contact$);
   }
  };
  }
    
    
    
   

 <!-- this is my html Edit page code -->

    <div> <!-- this input works but i dont know how to get others to work as well -->
      <input class="email" 
      placeholder="E-mail" 
      type="email" 
      name="email"
      formControlName = 'email'>   
       <div>
       <div>
        <input 
        class="email" 
        placeholder="E-mail"
        type="email" 
        name="email" 
        formControlName='email'> 
                                  
        <input 
        class="email" 
        placeholder="E-mail-3"
        type="email" 
        name="email" 
        formControlName='email'> 
        </div>
      </div> 
    </div>
    
    





  [1]: https://i.stack.imgur.com/SfrBL.jpg

Answer 1

You should use a FormArray for the email list.

  ngOnInit() {
    this.contactForm.addControl('first_name', new FormControl(''));
    this.contactForm.addControl('last_name', new FormControl(''));
    this.contactForm.addControl('email_list', new FormArray([]));
    this.contactForm.patchValue(this.DATA);
    const control = this.emailFormArray;
    control.controls = [];
    this.DATA.email_list.forEach(x => {
      control.push(
        this.fb.group({
          email: x,
        })
      )
    });
  }

Please, check this Stackblitz example I made: https://stackblitz.com/edit/angular-o2hox7

Make some changes, submit the form and check the results in the console.