1

Hola que tal quiero poner un limite a las entradas de mi formulario en el campo de telefono, para que solo puedan ingresarse maximo 5 numeros de telefono, mas sin embargo max, no funciona y estoy utilizando angular

En mi funcion de agregar tengo solo esto

agregarCelular(){this.telefonos.push(new FormControl())}

Y en mi HTML lo siguiente

<div class="row">
                                <div class="col-md-6">
                                    <div class="box01" formArrayName="telefonos"
                                        *ngFor="let telefono of telefonos.controls; let i = index;">
                                        <div class="box02">
                                            <mat-form-field appearance="outline" style="width: 100%;">
                                                <mat-label>Teléfono</mat-label>
                                                <input matInput placeholder="Ingresar número telefónico del usuario"
                                                    [formControlName]="i" maxlength="14" mask="(000) 000-0000"
                                                    onkeypress="return event.charCode >= 48 && event.charCode <= 57" tabindex="6" min="1" max="5">
                                            </mat-form-field>
                                        </div>
                                        <div class="box03">
                                            <mat-icon matSuffix><span (click)="eliminarCelular(i)"
                                                    class="fa fa-minus-circle" matTooltip="Eliminar celular"
                                                    style="color: #d23930;"></span></mat-icon>
                                        </div>
                                    </div>
                                    <div class="box03" (click)="agregarCelular()">
                                        <label style="color:#006341;"> Agregar celular </label>
                                        <mat-icon matSuffix>
                                            <span class="fa fa-plus-circle"
                                                matTooltip="Agregar celular" style="color:#006341;"></span>
                                        </mat-icon>
                                    </div>
                                </div>

Añado lo que es el controller de la app.

import { Component, OnInit, SimpleChanges } from '@angular/core'; import { FormArray, FormBuilder, FormControl, FormGroup, ValidationErrors, Validators } from '@angular/forms'; import { ThemePalette } from '@angular/material/core';

export class UsuariosComponent implements OnInit {

  ObjetoUsuario: FormGroup;
  edicion = false;
  titulo = "Inserción";
  botonGuardar = "Crear usuario";
  codeHTML = '';
  datoValidar: string[];
  arrayValido: { formato: Boolean; duplicados: Boolean };
  color: ThemePalette = 'primary';
  fieldTextType: boolean;
  errorNum = false;

 

  constructor(
    private ObjUsuario: FormBuilder,
    private route: ActivatedRoute,
    private _alertService: AlertasService,
    private router: Router
  ) {
    this.ObjetoUsuario = this.ObjUsuario.group({
      numeroEmpleado: ['', Validators.required],
      nombre: ['', Validators.required],
      apellidoPaterno: ['', Validators.required],
      apellidoMaterno: ['', Validators.required],
      puesto: ['', Validators.required],
      jefeDirecto: ['', Validators.required],
      externo: [false, Validators.required],
      negocio: ['', Validators.required],
      rol: ['', Validators.required],
      contrasenia: ['', Validators.compose([
        Validators.required,
         CustomValidators.patternValidator(/\d/, { hasNumber: true }),
         CustomValidators.patternValidator(/[A-Z]/, { hasCapitalCase: true }),
         CustomValidators.patternValidator(/[a-z]/, { hasSmallCase: true }),
         CustomValidators.patternValidator(/[^+-’=]/, { hasSpecialCharacters: true }),
         Validators.minLength(8)])
      ],
      confirmacionContrasenia: ['', Validators.compose([Validators.required])],
      telefonos: new FormArray([
        new FormControl('', Validators.required)
      ]),
      correos: new FormArray([
        new FormControl('', Validators.required)
      ]),
      extension: ['', Validators.required]
    },
    {
      // check whether our password and confirm password match
      validator: CustomValidators.passwordMatchValidator
   }
    );
  }

  ngOnInit(): void {

    try {
      const pageID = this.route.snapshot.paramMap.get('id');

      if (pageID != null) {
        console.log(pageID)
        this.eliminarCelular(0);
        this.eliminarCorreo(0);

        this.edicion = true;
        this.titulo = "Edición";
        this.botonGuardar = "Actualizar usuario";

        this.ObjetoUsuario.get('numeroEmpleado').disable();
        this.ObjetoUsuario.get('nombre').disable();
        this.ObjetoUsuario.get('apellidoPaterno').disable();
        this.ObjetoUsuario.get('apellidoMaterno').disable();
        
        this.ObjetoUsuario.get('numeroEmpleado').setValue(55555);
        this.ObjetoUsuario.get('nombre').setValue('Karen');
        this.ObjetoUsuario.get('apellidoPaterno').setValue('lara');
        this.ObjetoUsuario.get('apellidoMaterno').setValue('nata');

        this.ObjetoUsuario.get('extension').setValue(75091);
        this.ObjetoUsuario.get('rol').setValue('1');
        this.ObjetoUsuario.get('puesto').setValue('4');
        this.ObjetoUsuario.get('jefeDirecto').setValue('5');
        this.ObjetoUsuario.get('externo').setValue(false);
        this.ObjetoUsuario.get('negocio').setValue('14');
        this.ObjetoUsuario.get('contrasenia').setValue('1111$');
        this.ObjetoUsuario.get('confirmacionContrasenia').setValue('1111$');

        let varEditTelefonos = ["3721001697", "5727764596"]
        for (let telefono of varEditTelefonos) {
          this.agregarCelularEdicion(telefono);
        }

let varEditCorreos = ["[email protected]", "[email protected]"]
        for (let correo of varEditCorreos) {
          this.agregarCorreoEdicion(correo);
        }

        console.log(this.ObjetoUsuario);

      }

    } catch (e) {

    }

  }

  get telefonos(): FormArray {
    return this.ObjetoUsuario.get('telefonos') as FormArray;
  }

  get contrasenia() {
    return this.ObjetoUsuario.get('contrasenia');
  }

  get correos(): FormArray {
    return this.ObjetoUsuario.get('correos') as FormArray;
  }


  
  agregarCelular() {
     this.telefonos.push(new FormControl());
  }

  agregarCelularEdicion(telefono) {
    this.telefonos.push(new FormControl(telefono));
  }

  eliminarCelular(indice: number) {
    this.telefonos.removeAt(indice);
  }

  agregarCorreo() {
    this.correos.push(new FormControl());
  }

  agregarCorreoEdicion(correo) {
    this.correos.push(new FormControl(correo));
  }

  eliminarCorreo(indice: number) {
    this.correos.removeAt(indice);
  }

  agregarUsuario() {
    const idTransaccion = 'aaaa-1111-bbbb-2222';
    if (this.valideRequest()) {
      if(this.edicion){
        this.codeHTML = '<span style="font-size: 19px; font-weight: 400; text-align: center">Usuario actualizado </span> <br><br><ul> <span style="font-size: 20px; font-weight: 600; color: #006341;">' + idTransaccion + '</span></ul>';
      } else {
        this.codeHTML = '<span style="font-size: 19px; font-weight: 400; text-align: center">Usuario creado </span> <br><br><ul> <span style="font-size: 20px; font-weight: 600; color: #006341;">' + idTransaccion + '</span></ul>';
      }
      
      this._alertService.muestraMensaje("", "success", "top-end", 2500, "50rem", this.codeHTML);
      setTimeout(() => {
        this.router.navigate([/Admon/Usuarios/Lista])
      }, 2500);
    }
    console.log(JSON.stringify(this.ObjetoUsuario.value))
  }

  valideRequest() {
    
    var flag = true;
    var msg = "Verificar las siguientes observaciones:\n";

    if (this.ObjetoUsuario.get("numeroEmpleado").value == "") {
      msg += "\nNúmero de empleado es requerido.";
      flag = false;
    }
    if (this.ObjetoUsuario.get("nombre").value == "") {
      msg += "\nNombre es requerido.";
      flag = false;
    }
    if (this.ObjetoUsuario.get("apellidoPaterno").value == "") {
      msg += "\nApellido paterno es requerido.";
      flag = false;
    }
    if (this.ObjetoUsuario.get("apellidoMaterno").value == "") {
      msg += "\nApellido materno es requerido.";
      flag = false;
    }
    if (this.ObjetoUsuario.get("puesto").value == "") {
      msg += "\nPuesto es requerido.";
      flag = false;
    }
    if (this.ObjetoUsuario.get("jefeDirecto").value == "") {
      msg += "\nSeleccionar jefe directo.";
      flag = false;
    }
    if (this.ObjetoUsuario.get("negocio").value == "") {
      msg += "\nSeleccionar negocio.";
      flag = false;
    }
    if (this.ObjetoUsuario.get("rol").value == "") {
      msg += "\nRol es requerido.";
      flag = false;
    }
    if (this.ObjetoUsuario.get("extension").value == "") {
      msg += "\nExtensión es requerido.";
      flag = false;
    }

    let telsValidos = this.telefonosValidos();

    if (telsValidos.formato == false) {
      msg += "\nTeléfono(s) es(son) requerido(s), (verificar 10 dígitos).";
      flag = false;
    } else if (telsValidos.duplicados == true) {
      msg += "\nNúmeros teléfonicos duplicados).";
      flag = false;
    }

    let correosValidos = this.correosValidos();

    if (correosValidos.formato == false) {
      msg += "\nCorreo(s) es(son) requerido(s), (verificar formato: [email protected]).";
      flag = false;
    } else if (correosValidos.duplicados == true) {
      msg += "\nCorreos electrónicos duplicados).";
      flag = false;
    }

    if(this.ObjetoUsuario.get("contrasenia").value == "" || !CustomValidators.errorgral){
      msg += "\nAtender recomendaciones de contraseña.";
      flag = false;
    }
13:50

if(this.ObjetoUsuario.get("confirmacionContrasenia").value != this.ObjetoUsuario.get("contrasenia").value){
      msg += "\nLas contraseñas no coinciden.";
      flag = false;
    }

    if (!flag) {
      this._alertService.muestraMensaje(msg, "error", "top-end", 2500, "50rem", false);
    }

    return flag;
  }

  telefonosValidos() {
    this.arrayValido = null;
    this.datoValidar = new Array();

    var correcto = true;
    var dupls = false;

    for (let telefono of this.telefonos.controls) {
      this.datoValidar.push(telefono.value);
      if (telefono.value == null || telefono.value == '' || telefono.value.length < 10) {
        correcto = false;
      }
    }

    dupls = this.duplicados();

    this.arrayValido = {
      formato: correcto,
      duplicados: dupls
    };

    return this.arrayValido;
  }

  correosValidos() {
    this.arrayValido = null;
    this.datoValidar = new Array();
    
    var count = 0;
    var correcto = true;
    var dupls = false;

    for (let correo of this.correos.controls) {
      this.datoValidar.push(correo.value.trim());
      if (correo.value == null || correo.value == '') {
        count += 1;
      } else if (!this.emailValido(correo.value)) {
        count += 1;
      }
    }

    
    if(count != 0){
      correcto = false;
    }

    dupls = this.duplicados();

    this.arrayValido = {
      formato: correcto,
      duplicados: dupls
    };

    return this.arrayValido;
  }

  emailValido(email: string): boolean {
    let mailValido = false;
    var EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

    if (email.match(EMAIL_REGEX)) {
      mailValido = true;
    }

    return mailValido;
  }

  duplicados() {
    var duplicados = false;
    this.datoValidar.sort();
    this.datoValidar.forEach(function (currentValue, index, array) {
      if (index !== array.length && currentValue === array[index + 1]) {
        duplicados = true;
      }
    });
    return duplicados;
  }

  toggleFieldTextType() {
    this.fieldTextType = !this.fieldTextType;
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes)

  }

  // getFormValidationErrors() {

  // Object.keys(this.ObjetoUsuario.controls).forEach(key => {
  
  // const controlErrors: ValidationErrors = this.ObjetoUsuario.get(key).errors;
  // if (controlErrors != null) {
  // Object.keys(controlErrors).forEach(keyError => {
  // console.log('Key control: ' + key + ', keyError: ' + keyError + ', err value: ', controlErrors[keyError]);
  // });
  // }
  // });
  // }

}
3
  • listo ya modifique Commented el 13 jul. 2021 a las 18:24
  • no veo el max que mencionas, te recomiendo poner tu controlador completo para ver tu variable max. Te recomiendo siempre crear un ejemplo mínimo verificable Commented el 13 jul. 2021 a las 18:30
  • el max esta dentro del html en el input de telefonos. es ahi donde agregue el max Commented el 13 jul. 2021 a las 18:37

1 respuesta 1

0

Puedes probar esta validación:

maxLength(max: number): ValidatorFn | any {
  //Necesitamos retornar un abstracControl para poder
  // pasar parametros a la validación
  return (control: AbstractControl[]) => {
    //Verificamos que sea un formArray
    if (!(control instanceof FormArray)) return;
    // Si la validacion falla, debe retornarse un objeto con 
    // que nos servira para mostrar el error. 
    return control.length > max ? {
      maxLength: true
    } : null;
  }
}

Y simplemente llamas asi:

{ ...
  telefonos: new FormArray([
    new FormControl('', Validators.required)
  ], this.maxLength(5)),
  ...
}

Tomada de este ejemplo

1
  • si justamente verique lo que mandaste y ahora estoy tratando de integrarlo. Commented el 14 jul. 2021 a las 0:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.