Почему невозможно перезаписать FormGroup в Angular?

Question

Привет! Я хотел создать форму создания и обновления для объекта.

Чтобы различать, какой тип веб-сайта должен отображаться, я даю компоненту "/ new" или "/ {imei}" со свойством навигации.

-> / new -> create

-> / {imei} -> update

Это будет реализовано с помощью следующего код:

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)
    });
  }

Итак, с компонентом create все в порядке, здесь все в порядке, но когда я хочу вызвать тот же веб-сайт с обновлением, появляется эта ошибка:

Я не понимаю, почему это происходит, я инициализирую экземпляр формы группы, как я могу это исправить?

Первые несколько строк html код инициализации FormGroup:

<div class="container">
    <form class="border border-light p-5" [formGroup]="phoneForm">

Answer 1

Эта часть кода асинхронна:

 this.subscription.add(this.phoneService.GetPhoneByIMEI(params.id).subscribe(phone => {
      this.addNotUpdate = false;
      this.phone = phone;
      this.generateUpdateForm();
    }));

, поэтому код конструктора заканчивается неопределенной phoneForm.

Инициализируйте phoneForm с помощью группы форм по умолчанию или используйте * ngЕсли проверить, что phoneForm не равен нулю / не определен.

Answer 2

просто добавьте * ngIf: это позволит избежать ошибок инициализации до тех пор, пока форма не будет создана - и в самом первом состоянии, когда вы хотите обновить форму, будет значение null

Кстати, не используйте две функции для создания одинаковых, просто простая функция, такая как

//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);
 }));
}