Question

一切都从教程Make Your Angular Form’s Error Messages Magically Appear.开始有一个带有一个输入和一个按钮的简单表格。我需要在较低级别上调用Submit事件来调用另一个事件。因为form上有一条指令，所以明确的方法是按下按钮。

const submitBtn: HTMLElement = componentEl.querySelector('button');
submitBtn.click();

但是仅在测试模式下重新加载表格。我也尝试禁用表单提交。

<form [formGroup]="form" controlErrorContainer (ngSubmit)="onSubmit($event)">
...
onSubmit() {
  console.log('onSubmit...');
}

不被调用。我也尝试调用事件

form.triggerEventHandler('submit', null);

和

form.triggerEventHandler('ngSubmit', null);

更改检测已开始。

fixture.detectChanges();

This is StackBlitz to test it

Answer 1

我可以看到2种可能的解决方案：

1）如前所述，使用submitBtn.click();应该在模板中添加.preventDefault（）调用：

<form [formGroup]="form" controlErrorContainer (ngSubmit)="$event.preventDefault(); onSubmit($event)">

或在处理程序中

onSubmit(event) {
  event.preventDefault();
  console.log('onSubmit...');
  ...
}

OR

2）您可以添加一些帮助程序以在需要创建和发出事件的情况下使用它：

export function createNewEvent(eventName) {
    if (typeof(Event) === 'function') {
        // not IE
        return new Event(eventName);
    } else {
        // IE
        const event = document.createEvent('Event');
        event.initEvent(eventName, true, true);

        return event;
    }
}

并像这样使用它：

form..dispatchEvent(createNewEvent('submit'));

Answer 2

在您的代码中，我读到了这段话：

.form {
   width: 100%;
   display: block;
   margin-left: auto;
   margin-right: auto;
   max-width: 1024px; //insert your prefer value here;
}

但是在您的表单中，您传递了onSubmit() { console.log('onSubmit...'); }参数。删除$event参数。

Answer 3

我不知道为什么。但这有效。有人删除了他键入的答案。

ngNativeValidate

事件处理程序被调用，由它们调度。

form.triggerEventHandler(

如何使用ReactiveForm测试提交表单。表单在提交过程中重新加载

3 个答案: