Question

我已经将提交按钮提取到一个单独的组件中。现在，不提交表单/不再调用ngSubmit，因此不再调用Submit函数。

<form [formGroup]='form' (ngSubmit)='submit(form.value)'>
   ...
   <app-submit-button></app-submit-button>
</form>

问题是我的自定义组件app-submit-button中的按钮在单击时触发了函数调用。 Submit事件不会进一步传播到父组件，因此不会执行其Submit函数。但是，当我从子组件中删除（click）='submit（）'时，表单提交会生效。

<ng-container [ngSwitch]='state'>
  <button *ngSwitchCase='buttonState.Idle' (click)='submit()'
    type='submit'>{{idleText}}</button>
  ...
</ng-container>

我在app-submit-button以及按钮本身上使用了type ='submit'的情况下都尝试过。

我可以和它一起工作

<app-submit-button (click)='submit(form.value)'></app-submit-button>

并删除ngSubmit。我想知道这是否是正确的方法，或者它的行为是否与ngSubmit不同。

Answer 1

我认为您不应该仅为按钮创建其他组件。问题是您无法将事件从父母传递给孩子。这两个提交函数是不同的，因为它们属于不同的类（一个在父组件中，另一个在子组件中）。您可以在 app-submit-button 组件中创建一个事件，并在单击按钮时发出该事件。在您的 app-submit-button 打字稿文件中

@Output()
submitEvent = new EventEmitter<>();
submit(): void {
submitEvent.emit();
}

然后像这样

处理父组件html文件中的事件

<app-submit-button (submitEvent)="submit(form.value)"></app-submit-button>

它将触发子组件中的事件，而父组件将对该事件进行操作。但是，仅为提交按钮创建其他组件仍然是一种不好的做法。您应该直接在表单中使用按钮，而不要使用子按钮。我希望这有帮助。快乐编码；-）

在自定义角度按钮组件中提交不提交表单

1 个答案: