如何使用角度验证输入数字长度？

Question

我想使用角度验证一个 9 位数字，

这是在我的模式中：

<input type="number" class="form-control" ng-model="id" required>

我试过模式 = [0-9]{9}，似乎它传递了它得到的每个数字。 我只想传递数字 000000000 - 9999999999 ， min-max 也不适合我。

这是我的应用程序添加到此类的内容：

 class="form-control ng-pristine ng-valid-number ng-invalid ng-invalid-required"

感谢你 ！

Answer 1

我只是使用pattern作为验证器。 以下代码将使该字段成为required字段required并且必须only digits长度为10 only digits

ngOnInit() {
    this.firstForm = this.fb.group({
        firstCtrl: ['', [Validators.pattern('^[0-9]{10}$'), Validators.required]],
    });

Answer 2

您是否同时尝试过ngMinlength和ngMaxlength ？

例子：

<input type="text" ng-minlength=9 ng-maxlength=9 />

查看关于此的官方文档： https : //docs.angularjs.org/api/ng/directive/input

关于表单验证的非常好的教程： http : //www.ng-newsletter.com/posts/validations.html

Answer 3

正如 Rahul Desai 提到的，你必须使用 ngMinlength 和 ngMaxlength。
但是由于您想使用数字，因此您必须将代码稍微更改为此

<input type="number" ng-model="id" ng-minlength=9 ng-maxlength=9 required />

老实说，我不知道如何处理class="form-control" 。 也许你可以添加它或省略它？！

无论如何你也可以试试这个

<input type="number" ng-model="id" ng-pattern="/^[0-9]{1,9}$/" required />

你不应该再需要 min/max 属性了。

编辑：
我想我在第二个中犯了一个错误。 它应该是

ng-pattern="/^[0-9]{9}$/"

或者

ng-pattern="/^[0-9]{9,9}$/"

Answer 4

使用响应式表单，您应该以这种方式组合验证器：

formControlYourField: [
  "",
  Validators.compose([
    Validators.required,
    Validators.minLength(9),
    Validators.maxLength(9),
    Validators.pattern("^[0-9]*$"),
  ]),
]

当然在你的.html 中

<input
  matInput
  required
  formControlName="formControlYourField"
  type="text"
  placeholder="123456789"
/>