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?
Arkadiusz Idzikowski staff answered 6 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>
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.
Damian Gemza staff answered 6 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 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>
<!--<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 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...
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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