Question

当我单击“添加”按钮时，我想添加一行，该表存在于reactive form中。

这是我尝试html file

的方式

<tr *ngFor='let row of tableRows'>
    <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
        <td fxFlex="22">
            <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                <mat-label>Product </mat-label>
                <mat-select [(ngModel)]="tableRows.productId" required>
                    <mat-option *ngFor='let product of productList' [value]="product.productId">
                        {{product.name}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </td>
        <td fxFlex="15">
            <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                <mat-label>Price </mat-label>
                <input type='number' matInput [(ngModel)]="tableRows.price" name="" id="" placeholder="Price" required>
            </mat-form-field>
        </td>
        <td fxFlex="15">
            <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                <mat-label>Loan Term </mat-label>
                <mat-select [(ngModel)]="tableRows.loanTermId" required>
                    <mat-option *ngFor='let loanTerm of loanTermList' [value]="loanTerm.loanTermId">
                        {{loanTerm.numberOfMonths}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </td>
        <td fxFlex="15">
            <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                <mat-label>Quantity </mat-label>
                <input type='number' matInput [(ngModel)]="tableRows.quantity" name="" id="" placeholder="Quantity" required>
            </mat-form-field>
        </td>
        <td fxFlex="15">
            <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                <mat-label>Deposit </mat-label>
                <input type='number' matInput [(ngModel)]="tableRows.deposit" name="" id="" placeholder="Deposit" required>
            </mat-form-field>
        </td>
        <td fxFlex="15">
            <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                <mat-label>Total </mat-label>
                <input type='number' matInput [(ngModel)]="tableRows.total" name="" id="" placeholder="Total" required>
            </mat-form-field>
        </td>

这是我在ts文件中尝试的方式

newRow = { productId: '', price: '', loanTermId: '', quantity: '', deposit: '', total: '' };
tableRows = [{ productId: '', price: '', loanTermId: '', quantity: '', deposit: '', total: '' }];

  addTableRow() {
    this.newRow = { productId: '', price: '', loanTermId: '', quantity: '', deposit: '', total: '' };
    this.tableRows.push(this.newRow)
  }

希望我会工作。我在控制台中收到以下错误

ERROR Error: 
      ngModel cannot be used to register form controls with a parent formGroup directive.  Try using
      formGroup's partner directive "formControlName" instead.

任何帮助将不胜感激。预先感谢

Answer 1

您不能将ngModel与FormControl一起使用。而是使用FormControlName和FormArray。在组件中，ts文件

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

在构造函数中：： constructor(private fb: FormBuilder) { }

    ngOnInit() {

    /* Initiate the form structure */
    this.productForm = this.fb.group({
      pData: this._fb.array([])
    })
    this.addFormDetails();
  }

   addFormDetails {
     this.rowDataArray.push(this.BuildFormDynamic(data_from_backend));
   }

    get formData() { // use getter method to get the row array
       return this.productForm.get('pData') as FormArray;
  }

访问data_from_backend并在此处进行分配，如果为黑色，则HTML中不会显示任何数据，如果有值，则将在HTML中显示值

    BuildFormDynamic(data_from_backend): FormGroup {
    return this._fb.group({
      abc: [data_from_backend.abc],
      def: [data_from_backend.def],
      ghi: [data_from_backend.ghi],
      jkl: [data_from_backend.jkl],
      mno: [data_from_backend.mno],
      pqr: [data_from_backend.pqr]
    });
  }

在HTML中，使用FOrmControlName访问这些变量为表单元素命名productForm: FormGroup;在html文件中应使用相同的表单名称，例如：:

    `<form [formGroup]="productForm">
      <div formArrayName="pData">
    <div *ngFor="let item of formData.controls; let pointIndex=index" [formGroupName]="pointIndex">
    <label>
      Test Name: <input formControlName="abc" />
    </label>
<button type="button" (click)="deleteFormRows(pointIndex)">Delete Selling Point</button>
    </div>
<button type="button" (click)="addFormRows()">Add Selling Point</button>
  </div>
    </form>`

添加和删除行

 addFormRows() {
    this.formData.push(this.fb.group({point:''}));
  }
deleteFormRows(index) {
    this.formData.removeAt(index);
  }

这只是一个示例，请根据您的要求进行自定义。 Lemme知道是否有任何问题

在角度表中添加动态行

1 个答案: