We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

mat-error with drop down

Thread ID:





143018 Feb 28,2019 03:32 PM UTC May 13,2020 07:28 AM UTC Angular - EJ 2 5
Tags: DropDownList
Manolo Capdevila
Asked On February 28, 2019 03:32 PM UTC


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

Silambarasan I [Syncfusion]
Replied On March 2, 2019 09:16 AM UTC

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. 
Stackblitz sample: 
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? 

Manolo Capdevila
Replied On March 4, 2019 03:26 PM UTC


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

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

Is it possible?

Prince Oliver [Syncfusion]
Replied On March 7, 2019 12:27 PM UTC

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

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


Sureshkumar P [Syncfusion]
Replied On May 13, 2020 07:28 AM UTC

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'; 
  imports: [ 
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  
Sureshkumar P 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon