Validator minLength FormGroup Реактивная форма

Question

Я пытаюсь проверить minLength, но он не распознает его, для этого я использую функцию. Я также попробовал это непосредственно в шаблоне, но я не получаю никаких результатов.

myComponent.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>

myComponent.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': '';
}

Answer 1

minLength не работает в предыдущих версиях angular с type="number". Проверьте этот вопрос Github почему.

Если вам не нужно, чтобы входное значение имело значение 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 по желанию. Но это должно дать вам четкое представление о том, как справиться с этим.