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”

Answer 4

我认为您正在寻找这个：

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

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

4 个答案: