<ejs-textbox> incorrect [cssClass] handling

[mszewcz]

Example code:

<ejs-textbox
        [formControlName]="'someControlName'"
        [floatLabelType]="'Always'"
        [placeholder]="'Placeholder text'"
        [type]="'text'"
        [cssClass]="hasError(formGroup.someFieldName) ? 'e-error' : ''"
></ejs-textbox>

Expected behaviour:
Add e-error class when hasError() returns true, remove it when hasError() returns false

Actual behaviour:
e-error is added to/removed from
e-error is added to/NOT removed from <div class=".e-control-wrapper"> which holds &

[PrinceOliver]

Hi Michal,

Thanks for using Syncfusion products

We have validated the reported issue with TextBox component’s cssClass property. The cssClass property does not support two way binding property. Instead of adding ‘e-error’ class to the cssClass property, you can use ngClass directive in angular. Kindly refer to the below sample for achieving your requirements with using ngClass directive.

Sample: https://stackblitz.com/edit/angular-hpzjeu-gqr8he

In the above sample, by click on the button (Remove error), we have dynamically set false to formError property in class and removed the error class in the wrapper.

Please let us know if you require any further assistance on this.

Regards,
Prince

[mszewcz]

Hi Prince,

I'm not talking about two-way binding, just about regular data binding.

Regarding your example - please note, that [ngClass] used on <ejs-textbox> adds e-error class only to <ejs-textbox>, but all your CSS rules relate to .e-float-input.e-error, not .e-textbox.e-error.

Off-course I can add new CSS rules, but that's not a way it should be done.
IMO your library should somehow allow adding/removing e-error class (class binding) to <ejs-textbox>'s inner elements (as well as other ones, like e-success).

Please consider adding this feature or fixing your SCSS files to display input & label with error correctly, when e-error class is added to <ejs-textbox>.

Regards,
Michal

[ChristoIssac]

Hi Michal,

Thanks for the update.

We would like to inform you that, cssClass API will not be act like ngClass behavior in angular. It is used to add the custom classes to the element wrapper. You can achieve your requirement by adding the CSS in ngClass call back function. Please refer the below code block.
<ejs-textbox placeholder="First Name" (created) = 'onInputCreate($event)' floatLabelType="Always" required name='firstname' formControlName="firstname" [(value)]='firstName' #textbox [(ngModel)]="firstName" [ngClass]="getClassByValue(form.controls.firstname.valid)" ></ejs-textbox>

[component.ts]

public getClassByValue(e) : void { if (e) { this.textBoxObj.element.parentElement.classList.remove('e-error'); this.textBoxObj.cssClass = 'e-success'; } else { this.textBoxObj.element.parentElement.classList.remove('e-success'); this.textBoxObj.cssClass = 'e-error'; } }

Currently we have an issue on updating the textbox value in angular binding. So, form validation gets fails and return true if form is invalid. We have confirmed this as a bug in our side and Fix for this issue will included in our patch release which is expected to be rolled out in the mid of December, 2018.

Till that, as a work around, you can achieve your requirement by updating the element value in input keyup event. Please refer the below code block.
public onInputCreate(args) : void { this.textBoxObj.element.addEventListener('keyup', () => { (this.textBoxObj as any).localChange({value: this.textBoxObj.element.value}); }) }

For your convenience, we have prepared the below sample.
https://stackblitz.com/edit/angular-pqrxp8-ydhg2s?file=reactive-forms.html

Please refer the following documentation link to customize the floating label color,
https://ej2.syncfusion.com/angular/documentation/textbox/how-to#change-the-floating-label-color-of-the-textbox

Thanks,
Christo

[schallm]

Any updates on the cssClass part of this request? I also would like to see this functionality. Here is my forum post from earlier today asking a similar question.

https://www.syncfusion.com/forums/151413/use-angular-class-binding-concept-with-cssclass

[PonmaniMurugaiyan]

Hi schallm,

We can achieve your requirement by overriding the CSS styles of the placeholder and input border color of the TextBox component. Kindly refer to the below code example.

[app.component.html]

<ejs-textbox #name name="name" formControlName="display" placeholder='Enter your name'floatLabelType="Always"   
             [class.e-error]="getClass(display)">   
</ejs-textbox> 

[app.component.ts]

public getClass(valid) {   
        if (valid.valid) {   
            return false;   
        } else {   
            return true;   
        }   
    }   

[app.componnet.css]

    .e-textbox.e-error .e-float-input.e-control-wrapper,   
    .e-textbox.e-error .e-float-input.e-control-wrapper input,
    .e-textbox.e-error .e-float-input.e-control-wrapper:hover{   
    border-color:#a94442 !important;   
    }   
   
    .e-textbox.e-error .e-float-input.e-control-wrapper  label.e-float-text {   
    color: #a94442 !important;   
    }   

Please find the modified sample from the below link.
Sample Link: https://stackblitz.com/edit/angular-n6nqfd-8v2eez

Regards,
Ponmani M

[schallm]

I would suggest using the tag name instead of the .e-textbox class. The numeric textbox does not have a similar class. Here is my current rule for coloring the floating text.

ejs-combobox.e-error .e-float-input.e-control-wrapper label.e-float-text,
ejs-daterangepicker.e-error .e-float-input.e-control-wrapper label.e-float-text,
ejs-daterangepicker.e-error .e-input-group-icon.e-range-icon,
ejs-dropdownlist.e-error .e-float-input.e-control-wrapper label.e-float-text,
ejs-numerictextbox.e-error .e-float-input.e-control-wrapper label.e-float-text,
ejs-multiselect.e-error .e-float-input.e-control-wrapper label.e-float-text,
ejs-textbox.e-error .e-float-input.e-control-wrapper label.e-float-text,
ejs-timepicker.e-error .e-float-input.e-control-wrapper label.e-float-text,
ejs-timepicker.e-error .e-input-group-icon.e-time-icon {
  color: $btn-danger-bgcolor !important;
}

[PrinceOliver]

Hi Schallm,

Thanks for sharing the solution. We are glad the issue is resolved in your end.

Regards,
Prince