Topic: [mdbValidate]="false" not behaving correctly
philippederyck pro asked 5 years ago
Version: 7.3.0
Adding [mdbValidate]="false" to an input element shows unexpected behavior.
On input fields, the field is marked green on input, even though validation is turned off.
<div class="md-form">
<input mdbInputDirective [mdbValidate]="false" [(ngModel)]="value" type="text" name="title" class="form-control">
</div>
Textarea with mdbValidate is green by default on page load, without being touched at all.
<div class="md-form">
<textarea class="md-textarea form-control " rows="3" id="input_text" type="text" mdbInputDirective [(ngModel)]="value" [mdbValidate]="false">{{value}}</textarea>
<label for="input_text">Type your text</label>
</div>
Expected behavior: none of the form fields should turn green input at all. This used to work fine in 6.2.2
Arkadiusz Idzikowski staff answered 5 years ago
We will take a closer look at this problem. For now please try to upgrade to the new validation method and use mdbInput and mdbValidate directives instead of mdbInputDirective. Here is an example code:
HTML:
<form [formGroup]="testForm">
<div class="md-form md-outline form-sm">
<input
id="form-sm"
class="form-control form-control-sm"
type="text"
formControlName="input"
mdbInput
mdbValidate
/>
<label for="form-sm">Example label</label>
<mdb-error *ngIf="inputControl.invalid && (inputControl.dirty || inputControl.touched)">Input invalid</mdb-error>
<mdb-success *ngIf="inputControl.valid && (inputControl.dirty || inputControl.touched)">Input valid</mdb-success>
</div>
</form>
TS:
testForm: FormGroup;
ngOnInit() {
this.testForm = new FormGroup({
input: new FormControl(null, Validators.required)
});
}
get inputControl() { return this.testForm.get('input'); }
To turn off validation in this case you would need to add [validate]="false" input to the input element. You can find more information in our validation documentation.
Damian Gemza staff answered 5 years ago
Dear Andrew,
Which version of MDB Angular you're using? If you're using some older version than 7.4.2, please update the MDB, and check if those problems exists. Please let me know.
Best Regards,
Damian
Andrew pro answered 5 years ago
This solution works, but it doesn't accomplish what I would really like: No error or success messagesNo green borderYes to red border on errors
[mdbValidation]="false"
turns the success and error messages off but leaves the red/green border.
[validateSuccess]="false"
turns off the green border AND the success text[validateError]="false"
turns off the red border AND the error text
I can almost make things work by using a combination of [validateSuccess]="false"
and errorMessage=""
, but there seems to be a mistake in the style because then the red border only shows on the bottom even though I am using md-outline
.
The top input in the image is with [mdbValidation]="false"
, the bottom one only has errorMessage=""
*edit: The image doesn't seem to show, the link is https://www.dropbox.com/s/0wfh18kg8o5v985/input.png?dl=0
Arkadiusz Idzikowski staff answered 5 years ago
Thank you for letting us know about this problem, we will take a closer look at it. For now please try to use those inputs [validateSuccess]="false" [validateError]="false".
You can also check our new validation method, because in the future we will want to remove old mdbInputDirective from library.
philippederyck pro commented 5 years ago
Setting those properties solves it indeed. I could swear I tried that, but I must have messed something up.
Thank you for the quick response. Will look into the new validation methods soon!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.0.0
- Device: Macbook
- Browser: Chrome
- OS: macOS
- Provided sample code: No
- Provided link: No