从 Angular 中的多行传递多条数据

Question

我很困惑，如果我在 angular 中单击几行，我将如何提交一组数据？我对如何添加行并从那几行提交数据感到困惑。我使用 (ngSubmit) 提交数据，并使用 (click)="onAddRow(rowIndex)" 添加行。 thanksssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

<form class="form-horizontal" (ngSubmit)="onCreate(f)" #f="ngForm">
  <div class="card-block">
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th>Project ID</th>
          <th>Material SKU</th>
          <th>Unit</th>
          <th>Total Quantity</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>           
        <tr *ngFor="let addRow of row; let rowIndex = index">
          <td>
            <select type="text" class="col-md-10" id="project_id" name="project_id" ngModel required disabled>
              <option [value]="project.id">{{ project.id }}</option>
            </select>
          </td>
          <td>
            <select type="text" class="col-md-10" id="material_id" name="material_id" ngModel required>
              <option *ngFor="let material of materials" [value]="material.id">{{ material.sku }}</option>
            </select>
          </td>
          <td><input type="text" class="col-md-10" id="unit" name="unit" ngModel required></td>
          <td><input type="number" class="col-md-6" id="quantity" name="quantity" ngModel required></td>
          <td>
            <button type="button" class="btn btn-sm btn-danger" (click)="onDeleteRow(rowIndex)"><i class="fa fa-trash-o" aria-hidden="true"></i> Remove</button>
          </td>
        </tr>
      </tbody>
    </table>
    <button type="button" class="btn btn-sm btn-danger" (click)="onAddRow(rowIndex)"><i class="fa fa-trash-o" aria-hidden="true"></i> Add Row</button>
    <button type="submit" class="btn btn-primary" [disabled]="!f.valid">Save</button>
  </div>
</form>

ts

row = [{}];

 onAddRow() {
    this.row.push({});
  }

  onDeleteRow(rowIndex) {
    this.row.splice(rowIndex, 1);
  }

onCreate(form: NgForm){

// HOW WOULD I PASS SEVERAL DATA IF I HAVE SEVERAL ROWS?

    const formData = {
      project_id: form.value.project_id,
      material_id: form.value.material_id,
      unit: form.value.unit,
      quantity: form.value.quantity
    }

project_id

ngOnInit() {
    this.route.params 
      .subscribe((params: Params) => { 
      this.id = +params['id']; 
      this.projectsService = this.injector.get(ProjectsService);
      this.projectsService.getProject(this.id)
      .subscribe(
          (data:any) => {
            this.project = data;
            console.log(data);

          },
          error => {
            alert("ERROR");
          })
      });  

      this.getAllMaterials();
  }

Answer 1

我会继续转向反应形式，特别是因为你有一个数组，反应形式有你需要的东西，即 FormArray :)

将必要的东西（添加 ReactiveFormsModule）导入您的 ngModule，并在您的组件中导入

 import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms'

建立你的表格：

myForm: FormGroup;

constructor(private fb: FormBuilder) {
  this.myForm = this.fb.group({
    rows: this.fb.array([])
  })
  // called when adding new formgroups to your array
  this.initGroup()
}

initGroup() {
  let rows = this.myForm.get('rows') as FormArray;
  rows.push(this.fb.group({
    material_id: ['', Validators.required],
    unit: ['', Validators.required]
  }))
}

onDeleteRow(rowIndex) {
  let rows = this.myForm.get('rows') as FormArray;
  rows.removeAt(rowIndex)
}

模板看起来像这样，您在其中声明表单组、表单数组，然后迭代表单数组中的表单组，其中每个组都有索引值：

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <button (click)="initGroup()">Add row</button>
  <div formArrayName="rows">
    <div *ngFor="let row of myForm.controls.rows.controls; let i = index" [formGroupName]="i">
      <select formControlName="material_id">
        <option value=""></option>
        <option *ngFor="let material of materials">
          {{material.id}}
        </option>
      </select>
      <input formControlName="unit" />
      <button (click)="onDeleteRow(i)">Remove</button>
    </div>
  </div>
  <button type="submit">Submit</button>
</form>

编辑：

要从表单中获取数组，您可以使用以下代码获取数组：

onSubmit() {
  this.formData = this.myForm.get('rows').value
  console.log(this.formData); // here is your array
}

这就是我要走的路 :) 最后，这是 DEMO

从 Angular 中的多行传递多条数据

Passing Several Data from Several Rows in Angular

angular

angular-template

angular-forms