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

mat-error with drop down

Hi,

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

4 Replies

SI Silambarasan I Syncfusion Team March 2, 2019 04:16 AM

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: 
 
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? 
 
Regards, 
Silambarasan 



MC Manolo Capdevila March 4, 2019 10:26 AM

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


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

Is it possible?




PO Prince Oliver Syncfusion Team March 7, 2019 07:27 AM

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> 


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

Regards, 
Prince 



SP Sureshkumar P Syncfusion Team May 13, 2020 03:28 AM

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 


Loader.
Live Chat Icon For mobile
Up arrow icon