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>