Question

我有一个包含多个字段的简单表单，一个取消按钮和一个提交按钮。我在控件的表单中使用Angular Material。我已经开发了一个自定义验证指令，如果满足某些条件，它会使表单无效。验证会按预期禁用“提交”按钮，但在表单无效时，键盘上的“输入”按钮不会被禁用。

我不希望只有在表单无效时才会禁用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>

欢迎任何指导。感谢。

编辑创建对@Input的{{1}}引用似乎允许我在关闭FormGroup并提交表单之前检查表单是否有效：

mat-dialog

Answer 1

应该是areaForm.invalid而不是areaForm.form.invalid

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

1 个答案: