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

Form control does not pick the correct color

Here is the interface that I have -
export interface iGroupEventTypes {
  groupEventTypeId?: string,
  groupId?: string,
  groupEventTypeName: string,
  color?: string,
  defaultDuration?: number,
  arrivalTime?: number,
  isGame: Boolean,
  requiresLocation: Boolean,
  createdBy: string;
  createdDate: Date;
  modifiedBy: string;
  modifiedDate: Date;

Here is how I am assigning the data from the grid to the form template -
 createEventTypeFormGroup(data: iGroupEventTypes): FormGroup {
    return new FormGroup({
      'groupEventTypeId': new FormControl(data.groupEventTypeId),
      'groupId': new FormControl(data.groupId),
      'groupEventTypeName': new FormControl(data.groupEventTypeName, Validators.required),
      'color': new FormControl(data.color),
      'defaultDuration': new FormControl(data.defaultDuration),
      'arrivalTime': new FormControl(data.arrivalTime),
      'isGame': new FormControl(data.isGame),
      'requiresLocation': new FormControl(data.requiresLocation),
      'createdBy': new FormControl(data.createdBy),
      'createdDate': new FormControl(data.createdDate),
      'modifiedBy': new FormControl(data.modifiedBy),
      'modifiedDate': new FormControl(data.modifiedDate)

The HTML form template has the following for color -
<div class="form-group col-md-6">
            <label class="e-float-text e-label-top">Color</label><br /><br />
            <input ejs-colorpicker formControlName="color" id="color" name="color" type="color" />


When I set it for existing row the color displays in the control. But if I have new row being added it won't pick the Hex color.
For some reason the color picker always returns null. Every other value in the interface has some value in it.

Your help is greatly appreciated.


1 Reply

VK Vinoth Kumar Sundara Moorthy Syncfusion Team May 8, 2019 01:25 PM UTC

Hi Ameet, 
Thank you for contacting Syncfusion support. 
We have checked your reported issue and the color value returns properly in HTML form. For your convenience, we have prepared the sample to render the ColorPicker in form template and alert the color value in button click event. 
Could you please check the above sample and get back to us with more information (like exact use case scenario, complete code snippet, video demonstration or issue replicable sample) to replicate this issue in our end? Based on that we will validate and provide better solution quickly. 
Vinoth Kumar S 

Live Chat Icon For mobile
Up arrow icon