如何创建一个可以自我相乘并一次添加多个数据的表单 angular 5

Question

我创建了一个包含两个字段 Name 和 price 的表单。现在没问题，很容易添加数据。但是我想放置一个 add more 按钮，按下该按钮时会添加一行与上面相同的输入字段，其中包含 Name 和 price 字段。这必须允许用户一次添加多个数据，在他们填写数据并按下保存后，所有数据必须以相同的顺序添加到数据库中。我现在的 HTML:

<h4> Add Product</h4>
    <form [formGroup]="productForm" >
      <mat-input-container>
        <input matInput  type="text" formControlName="name" id="name" required="" name="name" placeholder="name">
      </mat-input-container>
    
      <mat-input-container>
        <input matInput  type="text" formControlName="price" id="price" required="" name="price" placeholder="price">
      </mat-input-container>
      <button md-raised-button >
        Add More
      </button>
      <button md-raised-button  [disabled]="productForm.invalid"
              (click)="onSubmit(productForm.value)">
        SAVE
      </button>
      <button md-raised-button class="btn btn-white btn-rounded pull-right"
              (click)="DepartmentComponent()">CANCEL
      </button>
    
    </form>

我当前的TS文件：

    import { Component, OnInit } from '@angular/core';
    /*import { Item } from './Item';*/
    import { NgForm }   from '@angular/forms';
    import { Http, Headers } from '@angular/http';
    import 'rxjs/add/operator/toPromise';
    import {FormBuilder, FormGroup, Validators} from '@angular/forms';
    import {HttpClient, HttpHeaders} from "@angular/common/http";
       
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {
      private productForm: FormGroup;
      private headers = new HttpHeaders({'Content-Type': 'application/json'});
      title = 'Laravel Angular 4 App';
      constructor(private _http: HttpClient,
                  private fb: FormBuilder, ) {}
      ngOnInit() {
        this._http.get('http://localhost:8000/api/products', {headers: this.headers} ).subscribe( data => {
          console.log('DATA', data);
        });
    
        this.productForm = this.fb.group({
          name: ['', Validators.required],
          price: ['', Validators.required],
        });
      }
      onSubmit(form) {
       console.log('FORM DATA', this.productForm.value);
    
        return this._http.post('http://localhost:8000/api/products', this.productForm.value, {headers: this.headers}).subscribe( data =>
          console.log('ASFASDASDAF', data));
      }
    
    }

Answer 1

根据这个 link，这可以使用 FormArray 完成，如下

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

每个项目组应该如下

createItem(): FormGroup {
  return this.formBuilder.group({
    name: '',
    price: ''
  });
}

并动态添加表单

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

和模板

<div formArrayName="items"
  *ngFor="let item of productForm.get('items').controls; let i = index;">
  <div [formGroupName]="i">
    <input formControlName="name" placeholder="Item name">
    <input formControlName="price" placeholder="Item price">
  </div>

  Chosen name: {{ productForm.controls.items.controls[i].controls.name.value }}
</div>

如何创建一个可以自我相乘并一次添加多个数据的表单 angular 5

how to create a form that can multiply itself and add multiple data at once in angular 5

angularjs-directive

angular

angular5