how to remove error and success validation messages in real

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

yeisonvelez11 free asked 6 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?

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

Dear yeisonvelez11,Please try to update your examples with new validation methods described in our <a href="https://mdbootstrap.com/docs/angular/forms/validation/" target="_blank" >validation documentation.</a>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><pre class="code-toolbar grey lighten-2 p-3 mb-3"><div class="md-form"> <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></pre></div><div> </div><div>3. In your ts file add:</div><div><div><pre class="code-toolbar grey lighten-2 p-3 mb-3">get input() { return this.testForm.get('contrasena'); }</pre></div></div>

Please insert min. 20 characters.

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 4 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 4 years ago

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

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear <a href="/profile/?id=51382" rel="nofollow">@yeisonvelez11</a> 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:<pre style="background-color: #212121; color: #eeffff; font-family: 'Fira Code'; font-size: 9.0pt;"><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> </pre>ts:<pre style="background-color: #212121; color: #eeffff; font-family: 'Fira Code'; font-size: 9.0pt;">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; } } </pre>Best Regards,Damian

Please insert min. 20 characters.

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

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

<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>
Entrar
</button>

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

<a href="/profile/?id=29824" rel="nofollow">@Damian Gemza</a>  it not works for meexport 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"> <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"> <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> Entrar </button>  </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.

Please insert min. 15 characters.

Arkadiusz Idzikowski staff commented 6 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 6 years ago

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

Add comment

Write

Create snippet

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

yeisonvelez11

161Support score
25Questions 3Answers 0Snippets