Angular 从表单数组获取

Question

我在 angular 6 中制作 CRUD 应用程序，但是当我去编辑页面时，我想将数据从数组传递到该页面上的输入字段，但是当我保存该页面数据时，应该再次在数组中（你可以在图片上看到）因为我必须像数组一样保存它。我也曾尝试使用 contact.email[i]，但之后我不知道如何将它们放在一个数组中，即 email。有人可以帮我吗？这是我的照片 i want to look like this 和我的代码...

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><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>
    
    

Answer 1

您应该使用 FormArray 作为电子邮件列表。

  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,
        })
      )
    });
  }

请检查我制作的这个 Stackblitz 示例：https://stackblitz.com/edit/angular-o2hox7

进行一些更改，提交表单并在控制台中检查结果。