Reputation: 25
Hi I wanted to create a Create and Update Form for a object.
To differ what type of website should be displayed I give the component either a "/new" or a "/{imei}" with the navigation property.
--> /new --> create
--> /{imei} --> update
This will be implemented with the following code:
if (params.id === 'new') {
this.addNotUpdate = true;
this.generateCreateForm();
} else {
this.subscription.add(this.phoneService.GetPhoneByIMEI(params.id).subscribe(phone => {
this.addNotUpdate = false;
this.phone = phone;
this.generateUpdateForm();
}));
}
generateCreateForm(){
this.phoneForm = new FormGroup({
imei: new FormControl("", [Validators.required, ValidationService.imeiValidator]),
inputDevice: new FormControl([Validators.required]),
labelDevice: new FormControl("", [Validators.required]),
inputBrand: new FormControl([Validators.required]),
labelBrand: new FormControl("", [Validators.required]),
inputModel: new FormControl([Validators.required]),
labelModel: new FormControl("", [Validators.required]),
inputColour: new FormControl([Validators.required]),
labelColour: new FormControl("", [Validators.required]),
inputStorage: new FormControl([Validators.required]),
labelStorage: new FormControl("", [Validators.required]),
purchasePrice: new FormControl("", [Validators.required, ValidationService.priceValidator]),
purchaseDate: new FormControl("", [Validators.required]),
saleDate: new FormControl(""),
rentalStart: new FormControl(""),
rentalFinish: new FormControl("")
});
}
generateUpdateForm(){
this.phoneForm = new FormGroup({
imei: new FormControl(this.phone.imei),
inputDevice: new FormControl(),
labelDevice: new FormControl(this.phone.device.kindOfDevice),
inputBrand: new FormControl(),
labelBrand: new FormControl(this.phone.brand.name),
inputModel: new FormControl([Validators.required]),
labelModel: new FormControl(this.phone.model.modelName),
inputColour: new FormControl([Validators.required]),
labelColour: new FormControl(this.phone.colour.colourName),
inputStorage: new FormControl([Validators.required]),
labelStorage: new FormControl(this.phone.storage.amount),
purchasePrice: new FormControl(this.phone.purchasePrice),
purchaseDate: new FormControl(this.phone.purchaseDate),
saleDate: new FormControl(this.phone.saleDate),
rentalStart: new FormControl(this.phone.rentalStart),
rentalFinish: new FormControl(this.phone.rentalFinish)
});
}
So the create part of the component is ok, nothing goes wrong here, but when i want to call the same website with the update this error comes up:
I dont understand why this comes up, I initialize the formgroup instance, how can I fix this ?
First few lines of html code where the FormGroup is initialized:
<div class="container">
<form class="border border-light p-5" [formGroup]="phoneForm">
Upvotes: 0
Views: 1479
Reputation: 58124
simple add a *ngIf: this avoid initials errors until the form is not create -and at very first state when you want update the form is null
BTW, not use two functions to make the same, just a simple function like
//make an interface
export interface IPhone {
imei: string;
inputDevice: string;
...
}
//make a unique function that return a formGroup
generateForm(data:any):FormGroup{
data=data || {} as Iphone
return new FormGroup({
imei: new FormControl(data.imei),
inputDevice: new FormControl(data.inputDevice),
labelDevice: new FormControl(data.device.kindOfDevice),
....
});
}
//this make you simple use
if (params.id === 'new') {
this.addNotUpdate = true;
this.phoneForm=this.generateForm(null);
} else {
this.subscription.add(this.phoneService.GetPhoneByIMEI(params.id).subscribe(phone => {
this.addNotUpdate = false;
this.phoneForm=this.generateForm(phone);
}));
}
Upvotes: 0
Reputation: 577
This part of code is asynchronous:
this.subscription.add(this.phoneService.GetPhoneByIMEI(params.id).subscribe(phone => {
this.addNotUpdate = false;
this.phone = phone;
this.generateUpdateForm();
}));
so the code of constructor end with an undefined phoneForm.
Initialize your phoneForm, with a default form group, or use a *ngIf to check if phoneForm is not null/undefined.
Upvotes: 3