Question

实际上，在添加点击时，我需要添加要添加的行，但我无法获取ngmodel对象。或者是否有其他最佳方式使用反应形式来实现，因此最终要求是在添加点击时获取一行并获取表单价值的最佳实现方式，或者请修改上面的代码

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

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

2 个答案:

html

ts