Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Calendar not working well together with validators #2790

Closed
sabotup opened this issue May 16, 2017 · 0 comments
Closed

Calendar not working well together with validators #2790

sabotup opened this issue May 16, 2017 · 0 comments
Assignees
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@sabotup
Copy link
Contributor

sabotup commented May 16, 2017

Hi,

I've been using Calendar component in an Angular Reactive Form and tried to add some validators to it. It all goes well until you try to validate if the user typed something that is a valid date or just left the input field empty. Calendar only returns null if date is not valid or field is empty, so you cannot distinguish between both cases (in my case, empty field is good, invalid value is not). I inspected the code and there is a property in Calendar named "filled" that should tell you if field has some content or not. That's great, I can use this property to determine if the field is empty, so I can do my validation. Problem comes in the moment you realize that validation code runs before this "filled" property gets updated with current value.

This is the code you have right now according to github:

 onInput(event) {  
        let val = event.target.value;   
        try {
            this.value = this.parseValueFromString(val);
            this.updateUI();
            this._isValid = true;
        } 
        catch(err) {
            //invalid date
            this.value = null;
            this._isValid = false;
        }
        
        this.updateModel();
        this.filled = val != null && val.length;
    }

There you can see that model of the component gets updated before "filled" property gets updated with good value. So in my code I had overridden the method just exchanging last two lines of the method:

onInput(event) {  
        let val = event.target.value;   
        try {
            this.value = this.parseValueFromString(val);
            this.updateUI();
            this._isValid = true;
        } 
        catch(err) {
            //invalid date
            this.value = null;
            this._isValid = false;
        }
        
        this.filled = val != null && val.length;
        this.updateModel();
    }

This way "filled" has the updated value and can be used to validate field is empty. I would prefer to have some method to check status of the field instead of relying directly on the property, but I leave that decision to you.

I will submit a PR with my proposed fix for you to consider.

Also created same issue on the forum:

https://forum.primefaces.org/viewtopic.php?f=35&t=50922

Thanks.

@cagataycivici cagataycivici self-assigned this May 26, 2017
@cagataycivici cagataycivici added the Type: Bug Issue contains a bug related to a specific component. Something about the component is not working label May 26, 2017
@cagataycivici cagataycivici added this to the 4.0.2 milestone May 26, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

No branches or pull requests

2 participants