Angular 从表单数组中获取角度信息

Angular 从表单数组中获取角度信息,angular,typescript,angular-forms,angular-arrays,Angular,Typescript,Angular Forms,Angular Arrays,我正在angular 6中制作CRUD应用程序,但当我进入编辑页面时,我想将数据从数组传递到该页面上的输入字段,但当我保存该页面时,数据应该再次出现在数组中(你可以在图片上看到),因为我必须将其像数组一样保存。我也尝试过使用contact.email[i],但之后我不知道如何将它们放在一个数组中,那就是email。有人能帮我吗?这是我的照片和代码 //Edit page component export class EditComponent implements OnInit { co

我正在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$);
   }
  };
  }
    
    

//编辑页面组件
导出类EditComponent实现OnInit{
联系人$:可见;
contactForm=this.fb.group({});
formSubmitted=false;
建造商(专用contactService:contactService,
专用路由:激活的路由,
专用路由器:路由器,
私有fb:FormBuilder){}
恩戈尼尼特(){
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('');
//从主页的url获取id并将其分配给新联系人$
this.contact$=this.route.paramMap.pipe(
开关映射((参数:参数映射)=>
this.contactService.getContactById(Number.parseInt(params.get('id')));
此.contact$.subscribe(contact=>{
如果(!isNullOrUndefined(联系)){
控制台日志(联系人);
this.contactForm.get('first_name').setValue(contact.first_name);
this.contactForm.get('last_name').setValue(contact.last_name);
这个.contactForm.get('phone').setValue(contact.phone);
这个.contactForm.get('id').setValue(contact.id);
**//我想分离这个数组并将其放入2数组中,然后在我**时再次放入1数组中
想保存它吗
这个.contactForm.get('email').setValue(contact.email);
};
});
};
保存($event):无效{
如果(!this.contactForm.valid){
返回;
};
this.formSubmitted=true;
这是saveContact();
this.router.navigate((['/home']);
};
私有存储联系人(){
const contact$=新联系人();
contact$.id=this.contactForm.get('id').value;
contact$.first\u name=this.contactForm.get('first\u name').value;
contact$.last\u name=this.contactForm.get('last\u name').value;
contact$.email=this.contactForm.get('email').value;
contact$.phone=this.contactForm.get('phone').value;
如果(联系人$.id==0){
this.contactService.addNewContact(contact$);
}否则{
this.contactService.updateContact(contact$);
}
};
}

您应该使用
格式数组
作为电子邮件列表

  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示例:


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

这起作用了,我做了一些调整,它起作用了,谢谢!