Form control does not pick the correct color

[Ameet]

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" />

          </div>

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.

Thanks,

Ameet

[Vinoth Kumar Sundara Moorthy]

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. 

 

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

 

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. 

 

Regards, 

Vinoth Kumar S