"min" 使用 Angular2 时不应用验证规则 "ngForm.valid"

Question

我正在使用 Angular 8 表单模块进行表单验证。我的问题是 "min" 验证规则在验证时不适用。这是我的示例表格：

html:

<form #form="ngForm" (ngSubmit)="form.valid && submit()">
  <input type="number" min="5" required name="count" [(ngModel)]="count">
  <button>submit</button>
  <br><br>
  Submitted value is : {{submittedValue || "Nothing yet..."}}
</form>

TS:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  count = -5;
  submittedValue :number;

  submit(){
    console.log(this.count);
    this.submittedValue = this.count;
  }
}

您可以在此处测试运行代码：https://angular-html-validation-test.stackblitz.io

Answer 1

目前模板驱动的表单不支持 angular 中的最小、最大验证。您需要为模板驱动实现自定义验证器或使用响应式表单。

您可以查看这个 - https://www.concretepage.com/angular-2/angular-4-min-max-validation 它可以帮助您使用模板驱动表单的自定义验证器。

也请查看此答案。 How to use min, max validation in template form angular 2

"min" 使用 Angular2 时不应用验证规则 "ngForm.valid"

"min" validation rule is not applied when using Angular2 "ngForm.valid"

javascript

validation

html5-validation

angular2-forms

angular