在角度模板驱动的表单中提交时显示表单验证错误

Question

我已经在Angular中创建了模板驱动的表单。

<form novalidate #f="ngForm" (ngSubmit)="onSubmit(f)">
<input type="text" class="form-control" name="fullName" #fullName="ngModel" required>
<div *ngIf="fullName.errors?.required && fullName.touched" class="validation-message">Required</div>
<button type="submit">Post</button>

无效并被触摸时显示错误。 提交表单时，即单击提交按钮时，我需要显示错误。

onSubmit({value, valid}): void {
    if (valid) {
      console.log(value);
    } else {
      console.log('invalid form');
    }
  }

Answer 1

将标志设置为true时有效，并使用$ ngIf：HTML

<form #myForm="ngForm" (submit)="onSubmit(myForm)">
        <input type="text" class="form-control" required [(ngModel)]="fullname"          name="fullname" #input="ngModel">
        <div style="color:red" *ngIf="submittedError">
                Error
        </div>
        <br><br>
    <button type="submit">Post</button>
</form>

打字稿：

submittedError;
...  
onSubmit({value, valid}): void {
    if (valid) {
     this.submittedError=false;
      console.log(value);
    } else {
     this.submittedError=true;
      console.log('invalid form');
    }
  }
}

演示

Answer 2

您必须使用一个额外的标志来做到这一点。

像下面一样

submitted = false;
onSubmit() { this.submitted = true; }

并将插入submitted到*ngIf语句中。

参考： https : //angular.io/guide/forms#toggle-two-form-regions-extra-credit

Answer 3

添加到答案中：ngForm暴露了一个已提交标志。 因此，只需创建一个模板变量，并对错误执行ngIf（即ngForm.submitted === true）

Answer 4

在onSubmit方法中，迭代所有表单控件，并简单地将它们标记为已触摸

Object.keys(form.controls).forEach(key => {
  form.controls[key].markAsTouched();
});