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

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

在此处查看实况演示

请检查这个

对于动态行，我们必须使用

FormBuilder

和

FormBuilder.array

html Angular中的被动表单：使用

FormArray

动态创建表单字段

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

HTML:

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

---

谢谢兄弟我的工作也完成了如何使表格只在添加时显示最初我得到一行是可能的吗？酷。！请接受这个答案。在构造函数中加载一项。加载一项意味着向我详细解释。使窗体仅在添加时显示最初我得到一行是否可能在添加前初始化窗体是否可能在添加后初始化单击

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: []
        });
    }
}

<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>

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