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]);
// });
// }
// });
// }
}
max
que mencionas, te recomiendo poner tu controlador completo para ver tu variablemax
. Te recomiendo siempre crear un ejemplo mínimo verificable