Angular 4表单无效不会阻止Enter提交表单

我有一个带有几个字段的简单表单，一个取消按钮和一个提交按钮。我在窗体中为控件使用角度材质。我开发了一个自定义验证指令，如果满足某些条件，该指令将使表单无效。验证将按预期禁用“提交”按钮，但当表单无效时，键盘上的“输入”按钮不会被禁用

我不希望总是禁用Enter按钮，仅当表单无效时才禁用。这能实现吗

本人声明如下：

<form class="dialog-form"
          novalidate
          #areaForm="ngForm"
          (ngSubmit)="onSubmit()">

<mat-dialog-actions align="end">
    <button mat-button
            [mat-dialog-close]="true"
            (click)="onCancel()">
        Cancel
    </button>

    <button mat-button
            [mat-dialog-close]="true"
            color="primary"
            type="button"
            (click)="onSubmit()"
            [disabled]="areaForm.form.invalid">
        {{data.buttonText}}
    </button>
</mat-dialog-actions>

---

它应该是

areaForm.invalid

而不是

areaForm.form.invalid

您的指令在哪里？在表格上？关于输入字段？好问题。我对表单上的自定义指令或直接对输入字段的自定义指令也有同样的问题。即使在输入字段上使用内置验证（如

required

with

minlength=“4”

），我也会遇到以下问题：用户可以在字段中单击，将文本删除回少于4个字符（此时提交按钮可视为禁用），然后按Enter键提交表单。但是，如果用户在字段中单击，删除少于4个字符并单击字段外，或按Tab键，则Enter不提交。：D不，我的意思是，您说您创建了一个指令。你到底把它放在哪里了？这将形成我对你的答案，所以我不想错过你问题的要点！如果需要使用多个字段确定表单的有效性，则某些表单在

表单

级别应用了验证指令。如果我只需要确定字段中输入值的有效性，则某些表单在

Input

级别应用了指令。问题似乎与任何验证器无关，但与提交表单的Enter键有关，即使表单

无效

。再说一次，我不在乎这一点，我想知道您使用了什么。如果你在寻找解决方案，我可以给你一个非常简单的解决方案，但是你写的方式，你实际上面临着一个问题，我需要知道你做了什么来引导你走上正确的道路。

onSubmit() {
    if (this.form.valid) {

        // Close the dialog.
        this.dialogRef.close(this.areaForCreation);
    };
};