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

}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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