CODEWITHSUNDEEP
javascriptangularjsformsdatetime
splash27
splash27

Reputation: 2107

The form is always invalid when I erase previously saved date with angular-datepicker

This problem is pretty hard to explain, but I'll try.

1) I fill the form and set a value in datetime field via angular-datepicker.

2) Press submit button. Form passes validation, everything is ok, the form was submitted and saved on server.

3) I want to edit previously completed form. I open form again and see previously saved results. If I erase the value from datetime field I can't submit the form any more. When I press submit button, nothing happens, no alerts, or errors. I can only see while debugging that operationsClientForm.$valid is false.

Important info:

1) If I just change the value of datetime, but will not erase it, everything will be ok. Issue happens only when I erase the value.

2) If I didn't fill the datetime field first time the form will be submitted. Issue happens only when I fill datetime filed first time and then erase it, while editing.

3) It is definitely client-side error.

Code samples:

<md-input-container class="md-block defaultInput deskInput">
     <input type="text" date-time ng-model="client.date_of_birth" auto-close='true' timezone="UTC" format="DD.MM.YYYY" min-view="date" template='views\controls\datepicker.tpl.html' pattern="^(\d{2}).\d{2}.(\d{4})$">
</md-input-container>

$scope.saveClick = function (operationsClientForm) {
        if (operationsClientForm.$valid) {
              //submitting
        }
}

<md-button class="md-raised rightAlign operationButton" ng-click="saveClick(operationsClientForm)" type="submit">
    <translate>Save</translate>
</md-button>

Upvotes: 1

Views: 358

Answers (1)

splash27
splash27

Reputation: 2107

So I found the probably reason of problem. When we erase a value from datetime field, the value inside model becomes undefined instead of "". It causes parse error inside angular form validators. The obvious (and dumb at the same time) idea is to replace undefined by "" in the model and then force angular validators again.

This is how it looks like:

<md-input-container class="md-block defaultInput deskInput">
    <input ng-blur="onDateTimeBlur($event)" type="text" date-time ng-model="client.date_of_birth" auto-close='true' timezone="UTC" format="DD.MM.YYYY" min-view="date" template='views\controls\datepicker.tpl.html' pattern="^(\d{2}).\d{2}.(\d{4})$">
</md-input-container>

    $scope.onDateTimeBlur = function (event) {
        if (event.currentTarget) {
            var modelReference = event.currentTarget.attributes["ng-model"].value;
            if (event.currentTarget.value == "") {
                this.value = "";
                this.setDeepValue(modelReference, "");
            }
        }
    };

    $scope.reValidateParseErrors = function (form) {
        var initialErrorsCount = 0;
        if (form.$error.parse) {
            initialErrorsCount = form.$error.parse.length; //to prevent infinite loop
            while (form.$error.parse) {
                form.$error.parse[0].$validate();
                if (form.$error.parse && form.$error.parse.length == initialErrorsCount) {
                    break; //break the loop if real parse errors exist
                }
            }
        }
    };

$scope.saveClick = function (operationsClientForm) {
    this.reValidateParseErrors(operationsClientForm);
    if (operationsClientForm.$valid) {
          //submitting
    }
}

Anyway, the qustion is still open, because my solution looks like I'm trying to overwhelm the Angular.

Upvotes: 2

Related Questions