[英]Angular getting from forms arrays
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.我正在 angular 6 中制作 CRUD 应用程序,但是当我去编辑页面时,我想将数据从数组传递到该页面上的输入字段,但是当我保存该页面时,数据应该再次出现在数组中(您可以在图片上看到) 因为我必须像数组一样保存它。 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 .
我也尝试过使用 contact.email[i] 但在那之后我不知道如何将它们放在一个数组中,那就是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
You should use a FormArray
for the email list.您应该将
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,
})
)
});
}
Please, check this Stackblitz example I made: https://stackblitz.com/edit/angular-o2hox7请检查我制作的这个 Stackblitz 示例: https ://stackblitz.com/edit/angular-o2hox7
Make some changes, submit the form and check the results in the console.进行一些更改,提交表单并在控制台中检查结果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.