Angular：使用浏览器的 HTML 本机构建验证错误消息

Question

Is there a way to use browser's native HTML validation error messages and use them in angular way?

what I would like is to when having like a reactive form like this:

testForm: FormGroup = this.fb.group({
  postCode: [{ value: 'postcode', disabled: true }],
  name: ['John'],
  city: [{ value: 'London', disabled: false }, [Validators.required, Validators.minLength(3)]],
});

to be able to use the native error messages in the form like:

<form [formGroup]="testForm" #myForm="ngForm">
  <input type="text" formControlName="city" >
  <div class="errors">
    <p *ngFor="let errorCode in myForm.controls.city.errors">
      {{ getBrowserNativeErrorMessage(errorCode) }}
    </p>
  </div>
</form>

Answer 1

You can use ngNativeValidate attribute in the form tag

<form ngNativeValidate>
</form>

But I don't think Reactive form Validators will work with this, you will have to use html native validation attributes

<input type="text" minlength="3" required>