单击添加按钮向表格添加一行，新行是每个单元格中的表单字段

Question

实际上，在添加单击时，我需要添加行，但我无法获取 ngmodel 对象或者是否有任何其他使用反应式表单实现的最佳方法，所以最后的要求是在添加单击时获取一行并获取表单值最好的实现方式或者请修改上面的代码

Stackblitz Link

Answer 1

在此处查看现场演示。

http://keepnote.cc/code/form-group-with-formarray-adding-dyamic-row-angular-5-6

请检查一下。

对于动态行，我们必须使用 FormBuilder 和 FormBuilder.array。

html

<form [formGroup]="carForm" (ngSubmit)="saveIntergration()">
    <div formArrayName="details" class="form-group" *ngFor="let field of carForm.get('details').controls; let ind = index;">
        <div [formGroupName]="ind">
            Type:
            <input type="text" formControlName="type">

            model:
            <input type="text" formControlName="model">

            year:
            <input type="text" formControlName="year">

            make:
            <input type="text" formControlName="make">

            color
            <input type="text" formControlName="color">

            plateNumber
            <input type="text" formControlName="plateNumber">

            <hr>
        </div>
    </div>
</form>

<button (click)="addRow()">Add New</button>

<pre>
    {{carForm.value | json}}
</pre>

ts

import { Component, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators, FormArray } from '@angular/forms';

@Component({
selector: 'app-root',
templateUrl: './app.component.html'

})
export class AppComponent {
    public carForm: FormGroup;
    constructor(private fb: FormBuilder) {

        const items = [];
        items.push(this.fb.group({
            type: [],
            model: [],
            year: [],
            make: [],
            color: [],
            plateNumber: []
        }));

        this.carForm = this.fb.group({
            details: this.fb.array( items )
        });
    }

    addRow() {
        const details = this.carForm.get('details') as FormArray;
        details.push(this.createItem());
    }

    createItem(): FormGroup {
        return this.fb.group({
            type: [],
            model: [],
            year: [],
            make: [],
            color: [],
            plateNumber: []
        });
    }
}

Answer 2

Angular 中的反应式表单：使用FormArray 动态创建表单字段。

请根据给定的示例更改您的代码。

HTML：

<form [formGroup]="orderForm" (submit)="onSubmit()">
  <div class="row">
    <button type="button" (click)="addItem()">add</button></div>
  <div *ngFor="let item of data" class="row">
    <div class="col">{{item.Type}}</div>
    <div class="col">{{item.Model}}</div>
    <div class="col">{{item.Year}}</div>
    <div class="col">{{item.Make}}</div>
    <div class="col">{{item.Color}}</div>
    <div class="col">{{item.PlateNumber}}</div>
    <div class="col">{{item.StateRegistered}}</div>
  </div>
  <div formArrayName="items" *ngFor="let item of orderForm.get('items').controls; let i = index;" class="row">
    <div [formGroupName]="i">
      <input formControlName="Type">
      <input formControlName="Model">
      <input formControlName="Year">
      <input formControlName="Make">
      <input formControlName="Color">
      <input formControlName="PlateNumber">
      <input formControlName="StateRegistered">
    </div>
  </div>
  <div class="row">
    <button type="submit">Submit</button>
  </div>
</form>

TS：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormArray, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-stack53513269',
  templateUrl: './stack53513269.component.html',
  styleUrls: ['./stack53513269.component.css']
})
export class Stack53513269Component implements OnInit {
  orderForm: FormGroup;
  items: FormArray;
  data: any = [];
  constructor(private formBuilder: FormBuilder) {
    this.data.push({ Type: 'SUV', Model: '500', Year: '2009', Make:'Mahinda',   Color:'Red',    PlateNumber:'RJ-15',    StateRegistered:'Rajsthan' });
  }

  ngOnInit() {
    this.orderForm = this.formBuilder.group({
      items: this.formBuilder.array([this.createItem()])
    });
  }

  createItem(): FormGroup {
    return this.formBuilder.group({
      Type:'',  Model:'',   Year:'',    Make:'',    Color:'',   PlateNumber:'', StateRegistered:''
    });
  }

  addItem(): void {
    this.items = this.orderForm.get('items') as FormArray;
    this.items.push(this.createItem());
  }

  onSubmit() {
    this.items = this.orderForm.get('items') as FormArray;
    console.log(this.items.value);
  }
}