Skip to main content
muestro el controller de mi app
Origen Enlace

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]);
  // });
  // }
  // });
  // }

}

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]);
  // });
  // }
  // });
  // }

}
quitar imagenes
Origen Enlace

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 Este es el diseño que manejo

En mi funcion de agregar tengo solo esto introducir la descripción de la imagen aquí

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

Y en mi HTML lo siguiente introducir la descripción de la imagen aquí

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

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 Este es el diseño que manejo

En mi funcion de agregar tengo solo esto introducir la descripción de la imagen aquí

Y en mi HTML lo siguiente introducir la descripción de la imagen aquí

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>
Origen Enlace

Como limitar cuantas veces ingreso un numero de telefono

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 Este es el diseño que manejo

En mi funcion de agregar tengo solo esto introducir la descripción de la imagen aquí

Y en mi HTML lo siguiente introducir la descripción de la imagen aquí