主页 / 问题 / 1041405
Accepted
JuniorCoder
Asked:2020-11-02 02:15:54 +0800 CST2020-11-02 02:15:54 +0800 CST

在 Angular 中使用动态表单

  • 772

我有一个像 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: ''
  }

通过点击新按钮，一个空的表单对象被压入数组，结果，一个新的表单被绘制出来，你可以有多少这样的表单。

问题是我需要从这些表单中收集值进行进一步处理。要获取我使用的值：

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

当我更改数据或添加新表单时，数据就会出现在我面前！我不知道如何正确保存它们以供进一步处理。创建一个数组，给每个表单一个id，并将数据压入数组，如果这个id下已经有数据，那就改吧！如何正确实现？？？

javascript

1 个回答

  1. Best Answer

    为此，Angular 有一个带有FormArray.

    在 Angular 中使用响应式表单的第一步是编写响应式表单模块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);
  }

}
    • 3

相关问题