时间戳

首页 > 解决方案 > Validator minLength FormGroup 反应式表单

angular - Validator minLength FormGroup 反应式表单

问题描述

我正在尝试验证 aminLength但它无法识别它，因为我正在使用一个函数。我也直接在模板中尝试过，但没有得到任何结果。

我的组件.html

<mat-form-field>
    <input matInput placeholder="Ingresa tu celular" type="number" formControlName="celular">
    <mat-error *ngIf="forma.controls['celular'].invalid">{{ errorCelular() }}</mat-error>
  </mat-form-field>

我的组件.ts

celular: [ '', [Validators.required, Validators.minLength(9)] ],


errorCelular() {
return this.forma.controls.celular.hasError('required') ? 'El celular es necesario.' :
this.forma.controls.celular.hasError('minlength')? 'Mínimo 9 caracteres': '';
}

标签： angularvalidationtypescriptangular-reactive-forms

解决方案

minLength在以前版本的 angular with 中不起作用type="number"。检查这个 Github 问题的原因。

如果您不需要输入为 of type="number"，请将其更改为type="text"，它应该可以工作。如果您需要它是数字类型，那么您应该使用自定义验证器来检查该数字是否大于最小 9 位数字（100000000）

import { AbstractControl } from '@angular/forms';

function customMinValidator(control: AbstractControl): { [key: string]: boolean } | null {

    if (control.value !== undefined && (isNaN(control.value) || control.value >= 100000000 )) {
        return { 'customMin': true };
    }
    return null;
}

然后像使用它一样 -
celular: [ '', [Validators.required, customMinValidator] ]

注意：以上只是“如何”使用它的一个例子。它不会像预期的那样工作，因为对于像 000112313 这样的数字，条件会失败，它的 minLength 为 9。但这应该让您对如何解决它有一个公平的想法。

推荐阅读