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