Angular 表单提交时的角度验证

我在angular中进行验证，如下所示：

<form #f="ngForm" (ngSubmit)="save(f.value, f.valid)" novalidate  >

     <input type="email" name="txtEmail" id="txtEmail" required
          [(ngModel)]="model.txtEmail" #txtEmail="ngModel">
        <div class="msgerror" *ngIf="txtEmail.invalid && (txtEmail.dirty || txtEmail.touched) ">E-Mail invalid</div>

     <button type="submit">Submit</button>

 </form>

电子邮件无效
提交

---

如何在表单提交时触发验证？它只在按输入中的键时起作用。

我认为这是在提交后验证字段的方法。示例如下：

component.html

<form name="editForm" role="form" novalidate (ngSubmit)="save(editForm)" #editForm="ngForm" class="form-horizontal">
    <input type="text" class="form-control" [(ngModel)]="model.txtEmail" name="txtEmail" id="txtEmail" required>
    <div [hidden]="!(editForm.controls.txtEmail?.dirty && editForm.controls.txtEmail?.invalid)">
        <small class="form-text text-danger"
           [hidden]="!editForm.controls.txtEmail?.errors?.required">
           This field is required.
        </small>
    </div>
    <button type="submit" type="submit">Save</button>
</form>

---

我找到了解决办法。我改变了：

<div class="msgerror" *ngIf="txtEmail.invalid && (txtEmail.dirty || txtEmail.touched) ">bitte die E-Mail Adresse angeben! </div>

Bite die电子邮件地址：Angelse Angelen！

到

Bite die电子邮件地址：Angelse Angelen！

我不想禁用提交按钮。必须有一种方法可以对提交的更新我的答案运行验证。我认为这是在提交后验证字段的最佳方法。希望这将是有用的，我会更新我的答案现在只。我认为这是在提交后验证字段的最佳方法。希望这对你有用。

<div class="msgerror" *ngIf="txtEmail.invalid && (txtEmail.dirty || txtEmail.touched) ">bitte die E-Mail Adresse angeben! </div>

<div [hidden]="txtEmail.valid || (txtEmail.pristine && !f.submitted)" class="text-danger">bitte die E-Mail Adresse angeben!  </div>