Повторно использовать Angular 8 реактивная форма для создания / обновления продуктов

Я использую реактивную форму для регистрации продуктов в Angular 8 SPA. Я хотел бы повторно использовать эту же форму, поэтому, как только я нажму кнопку «Обновить», эта же форма будет называться (она находится на отдельном компоненте), и эта форма будет содержать фактические данные о продукте, заполненные на нем.

Я не знаю, как вызвать компонент и передать фактические данные продукта для редактирования, или, что еще лучше, компонент сможет различать, когда он вызывается для создания или обновления существующего продукта.

Это фактический код, который управляет хранением нового продукта:

submit() {

    const selectedSubProducts = this.form.value.subproducts
      .map((v, i) => v ? this.subproductsData[i]['id'] : null)
      .filter(v => v !== null);


    this.product = {
      name: this.form.controls['name'].value,
      subproducts: selectedSubProducts
    };

    this.is.addProduct(this.product);
    this.form.reset();
  }

ОБНОВИТЬ:

Забыл сказать, что форма встроена в модал с помощью ng-bootstrap. Таким образом, кнопка, которая вызывает модальное состояние, находится в компоненте GridProductComponent, который вызывает ProductModalComponent, который оборачивает FormProductComponent. Таким образом, чтобы отправить фактические данные о продукте, я должен пройти через все три компонента, не зная, как это сделать, или, если существует другой, более четкий / более простой подход.

Часть GridProductComponent:

    <td>
         <button class="btn btn-primary"(click)="updateProduct(product, i)">Update</button>
     </td>
     <td>
         <button class="btn btn-danger (click)="delProduct(product)">Remove</button>
</td>

Шаблон ProductModalComponent:

<app-modal title="{{ title }}">
    <app-formproduct></app-formproduct>
</app-modal>

Всего 1 ответ


Вы можете предварительно заполнить форму, если она выбрана для редактирования. Данные могут поступать от щелчка в качестве ввода или получать данные из бэкэнда, используя параметр id в вашем маршруте. Вам нужно иметь два отдельных маршрута для добавления и редактирования с использованием одного и того же компонента.

fillForm(){
   this.form.patchValue({
     name: "name"
    });
 }

Чтобы проверить, выбран ли он для редактирования, вы можете взять URL-адрес, если Id существует, а затем выбрать его для редактирования. Если ваш маршрут имеет параметр "id" в вашем маршруте для редактирования:

 if (this.route.snapshot.params.id){
  this.fillForm();

}

Не забудьте ввести маршрут типа ActivatedRoute


Есть идеи?

10000