Drop Down list in Reactive Form

[James]

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]

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. 

Sample Link: https://stackblitz.com/edit/angular-iribr7-57cxzq?file=app/app.module.ts  

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.  

Sample Link: https://stackblitz.com/edit/angular-evgode-qk6xsz?file=app.component.html  

Video Link: https://www.syncfusion.com/downloads/support/forum/148847/ze/148847-1328023123  

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

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

3. 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]

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]

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