MdbInput Validation


Topic: MdbInput Validation

4ntibala pro asked 6 years ago

hi, how can i validate the new MdbInput control?

[template]
<input mdbInput mdbValidate type="text" class="form-control" id="caseid" name="caseid"
#caseid="ngModel" ngModel)]="currentCaseData.caseid" placeholder=""
required [validate]="true" [validateSuccess]="false"
[validateError]="true" disabled]="isCaseLocked">
<label for="caseid">Case ID</label>
<mdb-error *ngIf="caseid.invalid && (caseid.dirty || caseid.touched)">Case ID is required!</mdb-error>
[/template]

after declaring a viewchild on the input with

[code]
@ViewChild('caseid', {read: MdbInput}) private caseidField: MdbInput;
[/code]
i try to validate like this: 
[code]
this.caseidField.element.focus();
this.caseidField.element.blur();
//this.caseidField.element.focusBlur();
//this.caseidField.element.markAsTouched();
[/code]

where the last 2 lines cause errors... focus & blur dont - but the validationError does not get shown at all.

if i manually click and make the input lose the focus the error message gets correctly shown! what's the trick to make it work?

## btw, im using the newest version (7.1.1).. which doesnt exist as option in the select ##

Thanks


Damian Gemza staff answered 6 years ago

Dear @4ntibala 

I don't know if I understand you right, but you want to focus or blur element with some function, and then show validation status?

If yes, please try to use the below code:

this.caseidField['el'].nativeElement.focus();
this.caseidField['el'].nativeElement.blur();

For me it works, because the element is null, and ['el'] is an input element.

Best Regards,

Damian


4ntibala pro answered 6 years ago

thank you very much - this is what i needed!


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Mint 18.2
  • Provided sample code: Yes
  • Provided link: No