我的表单无效，但我的 (ngSubmit) 正在调用该函数答案

【问题标题】：My form is invalid but my (ngSubmit) is calling the function我的表单无效，但我的 (ngSubmit) 正在调用该函数
【发布时间】：2020-08-12 16:55:23
【问题描述】：

我有一个 formGroup，里面有一个提交按钮：

<form [formGroup]="myGroup" (ngSubmit)="submitForm()">
   <input type="text" formControlName="name">
   <button type="submit">Submit</button>
</form>

当我的组件初始化时，我调用这个函数来构建表单：

buildForm() {
  this.myGroup = new FormGroup({
    name: new FormControl(null, [Validators.required]),
  });
}

当我不填写输入并单击按钮时，我的组件正在调用submitForm()。我放了一个console.log(myGroup.valid)，它是false，但仍然调用(ngSubmit) 事件。
我还有其他组件，似乎当表单无效时，当用户单击提交按钮时，Angular 会自动不调用提交函数。我不知道我是否忘记了 Angular 做这个自动检查，或者我真的需要在我的提交函数中做一些事情，比如：

if(this.myGroup.valid) {}

【问题讨论】：

如果表单无效，如何禁用提交按钮？
要么禁用[disabled]="!myGroup.valid" 的按钮，要么检查submitForm() 中的表单是否有效
看起来不错，但我仍然很好奇这在某些组件中是如何工作的，而在其他组件中，当表单无效时调用提交函数
嗯，您可以尝试将控件初始化为 new FormControl('', { validators: Validators.required, updateOn: 'change' })，但如果它在某些组件中有效而在其他某些组件中无效，那就太奇怪了。
如果您的表单无效，无论哪种方式禁用按钮都是一种很好的做法，所以我会这样做

标签： angular

【解决方案1】：

不要从启用的按钮开始，我宁愿在验证成功之前不显示任何按钮。

你可以像这样连接一个变化监听器：

fromGroup.changes(changes=>{
  if (changes=="VALID"){ showMyButton(); }
})

【讨论】：

【解决方案2】：

您在不同组件中看到表单行为不同的最可能原因是在您的项目中同时使用了模板表单和反应式表单。 Angular Forms Introduction 描述了两种表单类型之间的主要区别。

正如其他评论者所建议的，对于响应式表单，您需要禁用提交按钮，直到表单数据有效。

尚未提及的是，当您在表单标签中包含(ngSubmit) 时，它还允许使用回车键提交表单。因此，即使您的提交按钮被禁用，用户点击回车时仍可以提交无效的表单值。

有几种方法可以解决此问题。

第一种方法

向(ngSubmit) 定义添加验证。

<form [formGroup]="myGroup" (ngSubmit)="myGroup.valid && submitForm()">

这将阻止您的提交逻辑在单击提交按钮或按下回车键时运行。

第二种方法

禁用模板中的提交按钮并仔细检查组件中的输入。

<button type="submit" [disabled]="!myGroup.valid">Submit</button>

当表单数据无效时，您可以轻松中止操作并可选择执行一些日志记录或其他逻辑。

submitForm() {
  if (!myGroup.valid) { 
    // Optionally send a message to your logging service
    return; 
  }
  // Your form submission logic
}

第三种方法

另一种选择是从表单标签中删除(ngSubmit)，然后从提交按钮中删除type="submit"，并将(click) 添加到提交按钮。

<button [disabled]="!myGroup.valid" (click)="myGroup.valid && submitForm()">Submit</button>

这消除了使用回车键提交表单的功能，这在某些情况下可能是可取的，但在其他情况下则不是。

登录到应用程序时，用户可能希望能够按 Enter 键提交他们的凭据。在可能有多个表单的页面上，可能会让人混淆究竟是哪个表单触发了 enter 键。

此选项仍会再次检查表单在 (click) 表达式中是否有效，因为精明的用户很容易使用浏览器工具启用页面上的按钮并提交无效表单。

结论

仅仅禁用提交按钮是不够的，但这是一种很好的做法。验证数据应始终使用代码完成，无论是模板中的简单表达式，还是包含在组件逻辑中。

如果您只需在提交前验证表单之外不需要做任何事情，那么模板中的表达式（第一种方法）是完美的。

第二种方法允许您在用户提交无效表单时添加更多逻辑，例如日志记录。

【讨论】：