Question

如果我按角度点击几行，我会如何提交数据数组？我很困惑如何添加行和从这几行提交数据。我已经使用（ngSubmit）提交数据，我有（点击）=＆＃34; onAddRow（rowIndex）＆＃34;用于添加行。 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)
}

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

<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中的几行传递几个数据

1 个答案: