Tengo el siguiente código en mi componente:
if (form.controls['minRange'].hasError('min')) { form.controls['minRange'].setErrors({ min: true }); }Recibo el mensaje en la entrada como 'minRange no es válido'. Pero quiero mostrar el mensaje de error como 'P
'Please enter a 5 digit value'Al igual que .setErrors, ¿cómo puedo configurar un mensaje de error en formcontrol? ¿Puede alguien ayudarme? Gracias.
Reactive Form en Angular le permite tener errores personalizados y validaciones personalizadas . A continuación se muestra un ejemplo:
HTML: validar si la entrada es número .
<form [formGroup]="form"> <input formControlName="age" > <span *ngIf="form.controls.age.errors?.invalidNumber"> // <--- invalidNumber is the key Age should be a number </span> </form>componente.ts
class TestComponent implements OnInit{ form:FormGroup; ngOnInit(){ this.createForm(); this.listenToAgeChange(); } createForm(){ this.form = new FormGroup({ age:new FormControl(null) }) } listenToAgeChange(){ this.form.controls.age.valueChanges.subscribe(age=>{ if(isNaN(age)){ this.form.controls.age.setErrors({invalidNumber:true}) // <--- Set invalidNumber to true }else{ this.form.controls.age.setErrors(null) } }) } }Respuesta 2021. No acceda directamente al control/error de formulario. Ahora hay funciones para hacerlo.
En HTML algo como esto en combinación con requerido.
Esta es nuestra clave de error personalizada.
loginForm.get('correo electrónico')?.getError('no válido')
<span *ngIf=" !loginForm.get('email')?.valid && (loginForm.get('email')?.touched || loginForm.get('email')?.dirty) " > {{ loginForm.get('email')?.hasError('required') ? 'Username Required' : loginForm.get('email')?.getError('invalid') }} </span>En el componente cuando se produce un error en la llamada a la API
this.loginForm.get('email')?.setErrors({ invalid: 'Invalid Username' });'no válido' es clave, su valor es nuestro mensaje de error.
¡Eso es todo!
TS:
if (form.controls['minRange'].hasError('min')) { form.controls['minRange'].setErrors({ incorrect: true, message: 'Please enter a 5 digit value'}); }html:
<ion-text color="danger">{{form.controls['minRange'].errors.message}}</ion-text>