Angular 从表单数组中获取角度信息
我正在angular 6中制作CRUD应用程序,但当我进入编辑页面时,我想将数据从数组传递到该页面上的输入字段,但当我保存该页面时,数据应该再次出现在数组中(你可以在图片上看到),因为我必须将其像数组一样保存。我也尝试过使用contact.email[i],但之后我不知道如何将它们放在一个数组中,那就是email。有人能帮我吗?这是我的照片和代码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
//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示例:
进行一些更改,提交表单并在控制台中检查结果。这起作用了,我做了一些调整,它起作用了,谢谢!