CODEWITHSUNDEEP
angularangular-reactive-forms
Dejavu
Dejavu

Reputation: 25

Why is it not possible to "overwrite" a FormGroup in Angular?

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:

enter image description here

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

Answers (2)

Eliseo
Eliseo

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

Soukyone
Soukyone

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

Related Questions