javascript - 使用 Angular 指令防止回调函数提交

Question

我试图从 Angular 指令中抑制回调。逻辑是显示来自指令的通知并防止回调中发生的任何其他事情。

模板的代码是

<form *ngIf="form" [formGroup]="form" (ngSubmit)="handleSubmit()" [noPristine]="form">

该指令是 noPristine ，如下所示：

@Directive({
    selector: 'form[noPristine]',
})
export class NoPristine {
    @Input('noPristine') form: FormGroup;
    @HostListener('ngSubmit', ['$event'])
    onSubmit(event: Event) {
        if (this.form.pristine) {
            // show notification here
//          this.form.setErrors({ pristine: true });
        }
    }
    constructor() {}
}

this.form.setErrors通过设置注释代码中显示的值，我已经能够过关。

然后在handleSubmit()回调中，我从函数返回 if!this.form.valid

但是错误设置表单会应用一些错误样式。我不希望这样做，我真正想要的是不调用 handleSubmit() ，通过执行类似event.stopPropagation()orevent.cancelBubble的操作，我无法使用这些函数实现此行为。event.preventDefault()可能不适用于这里，但我也尝试过。你有什么想法 ？

注意：我在指令中所做的所有这些都是为了防止在代码中触及太多文件。我知道这也可以在 handleSubmit 回调中完成。但后来我会触摸 *.ts 文件，它们太多了。现在我将只添加[noPristine]="form"到 HTML 文件中，我将完成。

标签： javascriptangulartypescript