0

我的角度应用程序有问题。在删除按钮中调用单击事件后，添加按钮中的另一个事件也会被调用。

我显示我的代码

<div [formGroup]="formGroup" id="{{controlName}}{{index}}">
  <select class="parameterInputSelect" [formControlName]="controlName" *ngIf="!canAddMore">
    <option *ngFor="let param of selectedValues" [value]="param">{{param}}</option>
  </select>
  <div *ngIf="canAddMore">
    <button mat-mini-fab color="primary" matTooltip="Add Sort Order"
            (click)="add()">
      <mat-icon>add</mat-icon>
    </button>
  </div>
  <div *ngIf="!canAddMore">
    <button
      class="delete-button"
      mat-mini-fab color="primary"
      matTooltip="Remove Sort Order"
      (click)="remove()"
    >
      <mat-icon>delete</mat-icon>
    </button>
  </div>
</div>

这是 HTML 代码，它是子组件或共享组件，他的 ts 文件看起来像这样

@Input() selectedValues: number[];
  @Input() index: number;
  @Input() formGroup: FormGroup;
  @Input() controlName: string;
  @Input() public canAddMore: boolean;
  @Output() public canAddMoreChange: EventEmitter<boolean> = new EventEmitter<boolean>();


  constructor() {
  }

  public add(): void {
    this.canAddMore = false;
    this.canAddMoreChange.emit(false);
  }

  public remove(): void {
    this.canAddMore = true;
    this.formGroup.get(this.controlName).reset();
    console.log(this.formGroup.get(this.controlName).value);
    this.canAddMoreChange.emit(this.formGroup.get(this.controlName).value);
  }

我已经调试过了，当我点击删除按钮时，会调用删除函数，但下一步也会调用添加函数

任何解决方案？

4

1 回答 1

0

您可以尝试添加类型属性并将其值设置为“按钮”。

对于每个按钮，您可以添加

<button type="button">

Angular 将表单内按钮的单击事件作为提交。并且由于您翻转了标志，因此另一个按钮正在呈现。而且我猜，由于按钮类型是默认的，它的事件也被调用。

于 2021-01-07T10:36:37.960 回答