從表單數組中獲取角度

Question

我正在 angular 6 中制作 CRUD 應用程序，但是當我去編輯頁面時，我想將數據從數組傳遞到該頁面上的輸入字段，但是當我保存該頁面時，數據應該再次出現在數組中（您可以在圖片上看到) 因為我必須像數組一樣保存它。 我也嘗試過使用 contact.email[i] 但在那之后我不知道如何將它們放在一個數組中，那就是email 。 任何人都可以幫我解決這個問題嗎？ 這是我的圖片，我想看起來像這樣，我的代碼...

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

您應該將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

進行一些更改，提交表單並在控制台中檢查結果。