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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Drop Down list in Reactive Form

Thread ID:

Created:

Updated:

Platform:

Replies:

148847 Nov 6,2019 10:49 AM UTC Nov 11,2019 10:01 AM UTC Angular - EJ 2 3
loading
Tags: DropDownList
James
Asked On November 7, 2019 09:42 PM UTC

Using your drop down list an a Reactive form is very challenging. Can you please address the following

1. Color Change of Underline on e-Success

In your example here https://ej2.syncfusion.com/angular/demos/#/material/textboxes/reactive-forms   the underlines changes to green when the text input is valid. 
If I use a DropDown List in the Reactive form. The underline does not change to green. I have tried binding the DropDownList to class e-success (which seems to control the underlining), but there is no combination of settings that I can find where the valid state of the DropDownList will cause the underline to change to green. How is the css of the form set to show valid state when an embedded control is valid?

Update: This item was answered earlier:for dropdownlits   https://www.syncfusion.com/forums/145893/e-success-on-dropdown-list
BUT it doesnt work for Numeric Text Box. How can this be made to work for Numeric Text Bos??

2. Resetting the Form

When the form is reset the dirty status of all embedded controls (DropDownList, NumericTextBox, DatePicker) are not set to pristine with dirty and touched false, as are the other native type controls such as Text. This means the form shows an error condition on these controls on a rest. How is the form with embedded controls succesfully reset such that the embedded controls are pristine?

3. Initialising the embedded controls

When attempting to initialize the value of embedded controls (DropDownList, NumericTextBox, DatePicker) the form.controls dirty is set to true sometime after I initialize the value. Even if I set the control to pristine, or the form to pristine or both, nothing I do will prevent the dirty flag from being set, or reset it. This means my Reactive Form always thinks I have changed these values. How do you successfully initialize values in embedded controls? Can you please update your documentation to show this



Berly Christopher [Syncfusion]
Replied On November 8, 2019 04:04 PM UTC

Hi James, 
 
Greetings from Syncfusion support. 
 
Query 1: 

BUT it doesnt work for Numeric Text Box. How can this be made to work for Numeric Text Bos?? 

Response

We need to get the input element properly to add the corresponding success, warning and error class to the input components. We have prepared the sample for the NumericTextBox component and attached it below. 


Query 2: 

When the form is reset the dirty status of all embedded controls (DropDownList, NumericTextBox, DatePicker) is not set to pristine with dirty and touched false, as are the other native type controls such as Text. This means the form shows an error condition on these controls on a rest. How is the form with embedded controls successfully reset such that the embedded controls are pristine? 

Response

While checked the reported query, we got the same state value of the form is correct when we placed the mentioned component (DatePicker, NumericTextBox, and DropDownList) and as well as HTML input textbox. Please check the below sample and provide the details that will help us to check and proceed further.  



  1. Have you faced issues in the state value of the form at the script level?

  1. have you faced issues in the DOM level such as adding “ng-pristine, ng-dirty, ng-valid” classes while reset the form?

  1. Have you mentioned the issue in the form level for each component separately?

Query 3: 

How do you successfully initialize values in embedded controls? Can you please update your documentation to show this 

Response

We will add the requested requirement in our documentation and update to you after changes has been published in online. 
  
Regards, 
Berly B.C 


James
Replied On November 11, 2019 12:27 AM UTC

1. Colour Change of Underline on e-Success: Thank you, all working. But you must put this in your documentation so others don't have this issue

2. Resetting the Form AND 3. Initialize the Embedded Controls
I confirm your solution is working. The issue on my side is caused by not being able to reset your controls, and to do so I was setting value to "" rather than NULL - which the compiler does not permit. I have raised an incident on this, and Syncfusion has confirmed the problem and agreed to release a patch (your incident reference 254473).  this patch when released will fix the problem on my end


All items in this thread are now closed - Thankyou


Sureshkumar P [Syncfusion]
Replied On November 11, 2019 10:01 AM UTC

Hi James, 
 
Thanks for your update. We will consider this in our documentation and we will update once the document has been published. 
 
Regards, 
Sureshkumar P 


CONFIRMATION

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