angular - Angular 表单验证禁用提交按钮

Question

在我的表单中，我使用名称检查名称和电子邮件验证

<input matInputrequired 
       minlength="3" 
       placeholder="Name" 
       ngModel   
       name="name" 
       #firstName="ngModel"
       [(ngModel)]="apiResult.name" 
       id="firstName">

并通过电子邮件发送

<input matInput 
       placeholder="Email" 
       ngModel name="email" 
       maxlength="100" 
       #email="ngModel" 
       email 
       [(ngModel)]="apiResult.email" 
       id="email">

如果名称字段为空且少于 3 个字符。电子邮件不是必需的，但如果用户添加了电子邮件，则应采用电子邮件格式。那么如果这些都是成功的，只启用提交按钮。

Answer 1

你的问题是什么？

如果您想查看构建带有验证的简单表单的示例，请查看此 repo 中的 movie-edit.component.html 文件：https ://github.com/DeborahK/MovieHunter

它包含禁用提交/保存按钮的代码，如下所示：

<button class="btn btn-primary" type="submit" [disabled]='!editForm.valid'>
    Save
</button>

Answer 2

好的，我们可以使用模板驱动的表单：

<form #myForm="ngForm">
   Your email and username inputs

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

Answer 3

使用[disabled]="myForm.invalid"：

<button [disabled]="myForm.invalid" type="submit">Submit</button>

Answer 4

我想你正在寻找这个：

<button [disabled]="!myForm.form.valid" class="btn btn-primary" type="submit">Submit</button>