Topic: how to remove error and success validation messages in real time.

yeisonvelez11 free asked 5 years ago


basically I have a form that has a validation of "required", according to certain circumstances it is no longer necessary to be required. With this you deleted the validation:

     <div class = "md-form">
      <input mdbInputDirective [errorMessage] = "errorMessage" [successMessage] = "'Custom success message'" formControlName = "myinput"
       type = "text" class = "form-control" id = "form14">
      <label for = "form14"> Custom validation messages </ label>
     </ div>

       this.validationForm.get ('myinput'). setValidators ([]);
       this.validationForm.get ('myinput'). updateValueAndValidity ();

and it works but the style and message of [successMessage] is present. How can I remove the style and the message in this case too?


Arkadiusz Idzikowski staff answered 5 years ago


Dear yeisonvelez11,

Please try to update your examples with new validation methods described in our validation documentation.

For example, for input with formControlName 'contrasena':

1. Remove mdbInputDirective and add mdbInput and mdbValidate directives.

2. In HTML code under label element add mdb-error and mdb-success components. 

<div class="md-form">

<i class="fa fa-lock prefix icon_color_input"></i>

<input type="password" [validate]="validate" class="form-control" id="contrasena" formControlName="contrasena" mdbInput mdbValidate>

<label for="contrasena">Contraseña</label>

<mdb-error* ngIf="validate && input.invalid && (input.dirty || input.touched)">Debe ingresar una contraseña</mdb-error>

<mdb-success *ngIf="validate && input.valid && (input.dirty || input.touched)">Contraseña Válida</mdb-success>

</div>
 
3. In your ts file add:
get input() { return this.testForm.get('contrasena'); }

Alfredo Cerrillo free commented 3 years ago

How can I do the same with jQuery instead of Angular? I can't find that on the available documentation https://mdbootstrap.com/docs/jquery/forms/validation/


Grzegorz Bujański staff commented 3 years ago

Hi @al This section of the forum is dedicated to Angular. Please create a new thread and select jQuery as technology.


Damian Gemza staff answered 5 years ago


Dear @yeisonvelez11 

Please take a look at our new validation. There is [validate] input which determines if validation should be active or not.

Here's my code which works perfectly:

.html:

<form [formGroup]="validatingForm">
<div class="md-form">
<input mdbInput mdbValidate [validate]="validate" type="text" id="form1" class="form-control" formControlName="required">
<label for="form1">Required validator</label>
<mdb-error *ngIf="validate && input.invalid && (input.dirty || input.touched)">Input invalid</mdb-error>
<mdb-success *ngIf="validate && input.valid && (input.dirty || input.touched)">Input valid</mdb-success>
</div>
</form>

<button mdbBtn color="primary" (click)="turnOff()">Turn off validation</button>

ts:

import {Component, OnInit} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
validatingForm: FormGroup;
validate = true;

ngOnInit() {
this.validatingForm = new FormGroup({
required: new FormControl(null, Validators.required)
});
}

get input() {
return this.validatingForm.get('required');
}

turnOff() {
this.validate = false;
}
}

Best Regards,

Damian


yeisonvelez11 free commented 5 years ago

@Damian Gemza  it not works for me

export class LoginComponent implements OnInit {
validatingForm: FormGroup;
validate:boolean=true;

constructor(
private ServicesProvider:ServicesProvider,
) {
}
ngOnInit() {

this.validatingForm = new FormGroup({
email: new FormControl(null, [Validators.required, Validators.email]),
contrasena: new FormControl(null, [Validators.required])
});

setTimeout(()=>{
console.log("yaa")
this.validate = false;
this.validatingForm.get('contrasena')!.setValidators([]);
this.validatingForm.get('contrasena')!.updateValueAndValidity();

},5000)
}

}

 

<form [formGroup]="validatingForm">
<div class="md-form">
<i class="fa fa-envelope prefix icon_color_input"></i>
<input type="email" class="form-control" id="correo" data-error="Correo inválido" data-success="Correo válido" formControlName="email" mdbInputDirective>
<label for="correo">Correo</label>
</div>
<div class="md-form">
<i class="fa fa-lock prefix icon_color_input"></i>
<input type="password" [validate]="validate" class="form-control" id="contrasena" data-error="Debe ingresar una contraseña" data-success="Contraseña Válida" formControlName="contrasena" mdbInputDirective>
<label for="contrasena">Contraseña</label>
</div>
<div class="text-center">
<button mdbBtn type="button" [disabled]="!validatingForm.valid" class="btn green-gradient btn-lg waves-effect waves-light" mdbWavesEffect>
<i class="fa fa-sign-in mr-1" aria-hidden="true"></i>Entrar
</button>
<!--<hr >
<div class="inline-ul text-center d-flex justify-content-center"><a class="icons-sm tw-ic px-2"><i class="fa fa-twitter white-text"></i></a><a class="icons-sm li-ic px-2"><i class="fa fa-linkedin white-text"></i></a><a class="icons-sm ins-ic px-2"><i class="fa fa-instagram white-text"></i></a></div>-->
</div>
</form>

 

I'm doing this to reproduce the problem. I write something in the field "contrasena" and quickly delete this. The style will appear in red indicating that the field is invalid. 5 seconds pass and this style and message do not disappear.

 

 


Arkadiusz Idzikowski staff commented 5 years ago

You use the old validation method. In that case you need to replace [validate]="validate" input with [mdbValidate]="validate" and it should work correctly. 


yeisonvelez11 free commented 5 years ago

@Arkadiusz Idzikowski  the style and error validation not hide...



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: web
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No