2

У меня есть компонент форма ,типу ReactForm:

Форма внутри компонента app-invProduct

<form>
      <input type="text">
      <input type="text">
</form>

<AppComponent>
  <app-invProduct *ngFor="let product of productList"></app-invProduct>
  <button>new</button>
  <button>save</button>
</AppComponent>

Также у меня есть массив объектов productList,ето образ пустой формы

producIteam:{} = {
    name: '',
    description: '',
    price: '',
    discount: ''
  }

По нажатию на кнопку new в массив у меня пушиться пустой объект формы, и в результате отрисовуеться новая форма,таких форм может быть сколько угодно.

Проблема состоит в том что мне надо собирать value с етих форм для дальнейшей обработки.Для получения значений я использую:

this.productForm.valueChanges.subscribe(
      data => console.log(data)
);

И когда я изминяю данные или добавляю нофую форму мне приходят данные! Я не знаю как правильно сохранить их для дальнейшей обработки. Создать массив, дать каждой форме id и пушить данные в массив , а если под таким id , уже есть данные то изминять их!Как правильно ето реализовать???

1 ответ 1

3

Для этого у Angular в модуле реактивных форм есть FormArray.

Первым делом для того чтобы использовать реактивную форму в ангуляре, нужно прописать модуль реактивных форм в app.module.ts

@NgModule({
  ...
  imports: [
    ...
    ReactiveFormsModule
  ],
  ...
})
export class AppModule { }

После этого можно будет работать с реактивной формой. Так вот перейдем к примеру использования FormArray.

Предположим что мы имеем следующую форму на html страничке:

<form [formGroup]="productForm"> <!-- Указываем объект нашей формы -->
  <div formArrayName="products"> <!-- Говорим что у нас в форме есть массив форм имени products -->
    <div
      *ngFor="let product of productForm.get('products')['controls']; let i = index"
      [formGroupName]="i"> <!-- Так как это массив мы можем итерировать его и давать название группе формы -->
      <input
        type="text"
        formControlName="productName"
        placeholder="Название"> <!-- Поле для названия продукта -->
      &nbsp;
      <input
        type="text"
        formControlName="productDescription"
        placeholder="Описание"> <!-- Поле для описания продукта -->
      <hr>
    </div>
  </div>
  <button (click)="onAddNewProduct()"> New product</button> <!-- Кнопка которая динамически добавляет нам в форму продукт-->
  &nbsp;
  <button (click)="onSaved()">Save</button> <!-- Кнопка сохранения -->
</form>

Основу для формы мы написали, теперь осталось написать логику, а это очень просто реализовывается, вот как выглядит сама логика формы:

export class AppComponent implements OnInit {

  productForm: FormGroup; // Наша форма

  ngOnInit(): void {
    // Инициализируем нашу форму
    // Добавляем в него элемент products типа FormArray
    // Он по умолчанию пустой
    this.productForm = new FormGroup({
      products: new FormArray([])
    });
  }

  // При нажатии на кнопку New Product форма будет динамически дополняться
  onAddNewProduct() {
    // Создается группа формы Product
    // С полями имени и описания
    const product = new FormGroup({
      productName: new FormControl(),
      productDescription: new FormControl()
    });
    // Затем добавляется в массив форм которую указали ранее
    (<FormArray>this.productForm.get('products')).push(product);
  }
  // При нажатии на сохранить просто выводим на экран результат
  onSaved() {
    console.log(this.productForm.value);
  }

}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.