mat-error with drop down

[Manolo Capdevila]

Hi,

How can I use a mat-error component with a ejs-dropdownlist validation in template driven form?

[Silambarasan I]

Hi Manolo, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your reported requirement and we would let you know that the mat-error is only applicable for mat component. By default, html input control also not working in it.  

 

However, the mat-error is the custom element to display the error message. We have provided the same scenario to display the error message by using custom 'div' element and the same can be demonstrated in the below demo sample. 

  

Demo: 

https://ej2.syncfusion.com/angular/demos/#/material/drop-down-list/template-driven 

 

Stackblitz sample: 

https://stackblitz.com/edit/angular-h11y7s?file=template-driven.component.ts 

 

 

Could you please check the above sample and let us know for what purpose that you want to use mat-error to show the error message? 

 

Regards, 

Silambarasan 

[Manolo Capdevila]

Hi,

I use material material inputs and material-error for display error validations.

But I use your dropdown,and I like set the same style for validations. Similar as if I used the material selector

https://stackblitz.com/angular/ayldjpaxaby?file=app%2Fselect-hint-error-example.html

I need the same validation style for all input controls, and I don't load bootstrap

Is it possible?

[Prince Oliver]

Hi Manolo, 

Thank you for your update. 

The mat-error is only applicable for mat component. We have provided the same scenario to display the error message by using custom ‘sync-error’ element and the same can be demonstrated in the below example code. 

<div class="mat-form-field mat-form-field-infix"> 

    <ejs-dropdownlist name="skillname" required #book='ngModel' [(ngModel)]='autoskillname' [dataSource]='autoSkillsetData' 

        [placeholder]='autoDrivenPlaceholder' floatLabelType='Auto'> 

    </ejs-dropdownlist> 

    <sync-error [invalid]="book.invalid && (book.touched)" [errorsrequired]='book.errors?.required'></sync-error> 

</div> 

Sample Link: https://stackblitz.com/edit/angular-zyfxur-bppmml  

Please let us know if you need any further assistance on this. 

Regards, 

Prince 

[Sureshkumar P]

Hi MLaden, 

 

Thanks for your update.  

 

Based on your shared information, in order to use two-way data binding for form components you need to import the FormsModule package in your Angular module. 

 

Kindly refer the below code example. 

 

import { FormsModule } from '@angular/forms'; 

 

@NgModule({ 

  imports: [ 

    FormsModule 

  ] 

}) 

 

 

To know more about the reported problem. Please refer the stackoverflow link : https://stackoverflow.com/questions/43298011/angular-error-cant-bind-to-ngmodel-since-it-isnt-a-known-property-of-inpu  

 

Regards, 

Sureshkumar P