Topic: [mdbValidate]="false" not behaving correctly

philippederyck pro asked 3 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 3 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 3 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 commented 3 years ago

I am using 7.4.2


Andrew pro answered 3 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=""

Incorrect error border

*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 3 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.

Validation documentation


philippederyck pro commented 3 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!



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

  • User: 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