Angular：使用瀏覽器的 HTML 本機構建驗證錯誤消息

Question

有沒有辦法使用瀏覽器的本機 HTML 驗證錯誤消息並以 angular 方式使用它們？

我想要的是像這樣的反應形式：

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

能夠以如下形式使用本機錯誤消息：

<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

您可以在form標簽中使用ngNativeValidate屬性

<form ngNativeValidate>
</form>

但我不認為 Reactive form Validators會用這個，你將不得不使用 html native validation attributes

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