角度表单验证禁用提交按钮

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

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

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

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

Answer 2

你的问题是什么？

如果要查看通过验证构建简单表单的示例，请在此存储库中查看movie-edit.component.html文件：https : //github.com/DeborahK/MovieHunter

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

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