how to remove error and success validation messages in real

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

yeisonvelez11 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

Damian Gemza staff answered 6 years ago

0 0 Best answer

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

</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 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 commented 6 years ago

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

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

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

User: 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 likes 0Snippets