Question

我正在创建带有验证的Angular 6表单。我只想在提交表单后显示错误消息。重要的事实是消息在键入期间不应更改。因此，例如，当用户在输入中未键入任何内容然后提交表单时，将显示必需的消息。之后，当用户键入内容时，消息应该一直可见，直到按下下一个提交按钮。同样，在执行上一个规则时，错误消息也不应更改为其他错误消息。老实说，我不知道是否可以使用反应式表格。

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>

app.component.ts

export class AppComponent  {
  form: FormGroup
  constructor(private fb: FormBuilder,) {
      this.form = this.fb.group({
          firstName: ['', [Validators.required, Validators.minLength(5)]]
      });
  }

  submit() {
    console.log(this.form);
  }
}

演示：stackblitz

感谢您的帮助！

Answer 1

您可以像这样检查提交功能中的有效性：

<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');
  }

Answer 2

在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一起使用，请参见the answer to Q in stackoverflow

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

2 个答案: