时间戳

首页 > 解决方案 > 动态表单单个参数如何删除垫子表单字段

javascript - 动态表单单个参数如何删除垫子表单字段

问题描述

我无法删除单个参数垫表单字段，但我可以删除多个参数表单字段

<ng-container *ngSwitchCase="'input'">
  <ng-container *ngIf="param.allowMultiple; else singleParam">
    <mat-form-field [formArrayName]="param.name" *ngFor="let control of controls(param); let i=index"
      appearance="standard">
      <mat-label>{{ param.label}}</mat-label>
      <input  matInput [formControlName]="i" [readonly]="param.readOnly" [required]="param.required">
      <mat-error *ngIf="control.invalid">{{ param.validationErrorMessage || 'Error' }}</mat-error>
      <mat-icon *ngIf="i === 0" class="add-icon" (click)="addControl(param)"
        matTooltip="{{ 'FORM.ADD_FIELD' | translate : { label: param.label } }}">add</mat-icon>
      <mat-icon *ngIf="i > 0" class="remove-icon" (click)="removeControl(param.name, i)"
        matTooltip="{{ 'FORM.REMOVE_FIELD' | translate : { label: param.label } }}">delete</mat-icon>
    </mat-form-field>
  </ng-container>
  <ng-template #singleParam>
    <mat-form-field appearance="standard">
      <mat-label>{{ param.label}}</mat-label>
      <input  matInput [formControlName]="param.name" [readonly]="param.readOnly" [required]="param.required">
      <mat-icon *ngIf="i > 0" class="remove-icon" (click)="removeControl(param.name, i)"
        matTooltip="{{ 'FORM.REMOVE_FIELD' | translate : { label: param.label } }}">delete</mat-icon>
      <mat-error *ngIf="form.controls[param.name].invalid">{{ param.validationErrorMessage || 'Error' }}</mat-error>
    </mat-form-field>
  </ng-template>
</ng-container>

  removeControl(name: string, index: number): void {
    const control = this.form.get(name) as FormArray;
    control.removeAt(index);
  }

标签： javascriptangular

解决方案

您的removeControl()方法在第一种情况下有效，因为控件属于 a FormArray，因此您可以调用FormArray#removeAt.

但是，在单个元素不在 a 中的情况下FormArray，而是在 a 中FormGroup。要从 FormGroup 中删除元素，请使用FormGroup#removeControl.

推荐阅读