Javascript 仅在表单提交后显示错误消息

我正在创建带有验证的Angular 6表单。我只想在提交表单后显示错误消息。重要的事实是，消息在键入过程中不应更改。因此，例如，当用户没有在输入中键入任何内容，然后提交表单时，应该会显示所需的消息。之后，当用户键入某个内容时，消息应该一直可见，直到按下下一个submitt按钮。此外，当满足之前的规则时，错误消息不应更改为另一条。老实说，我不知道是否可以使用反应形式

app.component.html

<form [formGroup]="form" novalidate (ngSubmit)="submit()" #myform="ngForm">
    <input class="input" type="text" formControlName="firstName" />   
    <p *ngIf="form.get('firstName').hasError('required') && myform.submitted">
      Name is required
    </p>
    <p *ngIf="form.get('firstName').hasError('minlength') && myform.submitted">
      Min length of string is {{form.controls.firstName.errors.minlength.requiredLength}}    
    </p>
    <button type="submit">Submit</button>
</form> 

演示：

---

谢谢你的帮助

您可以在提交功能中检查验证，如下所示：

<p *ngIf="requiredError">
  Name is required
</p>
<p *ngIf="invalid">
  Min length of string is {{form.controls.firstName.errors.minlength.requiredLength}}    
</p>

  invalid: boolean;
  requiredError: boolean;
  submit() {
    console.log(this.form);
    this.invalid = this.form.get('firstName').hasError('minlength');
    this.requiredError = this.form.get('firstName').hasError('required');
  }

名称是必需的


字符串的最小长度为{{form.controls.firstName.errors.minlength.requiredLength}}

无效：布尔值；
必需错误：布尔值；
提交（）{
console.log（this.form）；
this.invalid=this.form.get（'firstName'）.hasrerror（'minlength'）；
this.requireError=this.form.get（'firstName'）.hasrerror（'required'）；
}

在Angular 7中，您可以使用：{updateOn:'submit'}或{updateOn:'blur'}

*使用新FormGroup和新FormControl更新（使用formBuilder无效）

当您想要更正错误时，请使用{updateOn:'blur'}，如果仅在提交时才使用{updateOn:'submit'}，请将焦点放在输入上

this.form = new FormGroup({
        firstName:new FormControl('', 
          [Validators.required, Validators.minLength(5)])
      },{updateOn:'submit'});

---

*更新2如果要与formBuilder一起使用，请参见

我认为不可能与反应式表单一起使用。模板驱动的表单更灵活，您可以轻松地进行自定义。@shadowman_93，不可能是什么：）（另外，我不同意您的观点：对我来说，反应式表单比模板驱动的表单更灵活）在您的示例中{form.controls.firstName.errors.minlength.requiredLength}不能使用。由于字符串长度超过5个字符，控制台将抛出错误。但除此之外，它的工作原理与我预期的一样，因此感谢您的努力！：）你可以像这样使用问号：

{{form.controls.firstName.errors？.minlength？.requiredLength}}

这也不行……对不起，我不知道我在想什么。UpdateOn不使用FormBuilder，请参阅

this.form = new FormGroup({
        firstName:new FormControl('', 
          [Validators.required, Validators.minLength(5)])
      },{updateOn:'submit'});