AngularJS Form Validation - Bind input to model eventhough there is input error

Question

I have a form using the built in angularjs form validation and ng-messages. Look at this code.

<div class="form-group" ng-class="{ 'has-error': form1.firstName.$invalid && form1.firstName.$touched }">
<label class="control-label">* First Name</label>
<input name="firstName" ng-model="applicant.firstName" required ng-pattern="alpha" ng-minlength="2" ng-maxlength="30" type="text" class="form-control" />
<div class="help-block has-error" ng-messages="form1.firstName.$error" ng-if="form1.firstName.$touched">
    <div ng-messages-include src="/worktrustedV2/app/modules/core/templates/errorMessages.template.html"></div>
    <div ng-message="pattern" class="error" style="color:red">This field requires letters only</div>
</div>

If the input doesnt trigger an error, then if you console.log($scope.applicant.firstName);, it prints the value, but if the input has an error, console.log($scope.applicant.firstName); becomes undefined.

Is there a way to make angular(or maybe it because of ng-messages) bind the input's value even if it has error? I want to make console.log($scope.applicant.firstname); to print the value even if the input has error.

weirdpanda · Accepted Answer · 2015-11-08 12:56:31Z

3

EDIT: After you rephrased the question

I remember I was facing the same problem when writing an application; when you have 10000+ lines of code, you can imagine the situation. Now, if I understand it clearly, you WANT applicant.firstName to have SOME value even if the validation fails? If that's the case, let me explain to you how Angular works.

Whenever you define a field as an ng-model, the internals of Angular manage two values for this field:

$modelValue
$viewValue

As you might have guessed from the names of these variables, $modelValue is the value of the input instance to be used by the model, and the $viewValue is used for displaying it, etc. (AngularJS ngModel)

Our good friends at Angular have done something pretty useful: whenever the input field doesn't pass the test, the $modelValue is set to undefined. So, when you try to get the value of that model, Angular sees that it's empty and so returns an undefined. Also, when the validation fails, <parentForm>.$invalid is switched to true.

For your case, you can give it a default value; so, even if the validation fails, you'll get SOME value.

Simple add:

$scope.applicant.firstName = "[email protected]";

in the controller to get a value even after the validation fails.

Yeah! You can check if the value if undefined and break out of the function. That's the best method.

...
$scope.submit = function() {

    if( $scope.firstName === undefined || 
        $scope.firstName === null ) { return; } 

    ... // Continue normal execution

}

edited Nov 8, 2015 at 12:56

answered Nov 8, 2015 at 7:14

weirdpanda

2,6461 gold badge22 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Alex Coroza Over a year ago

Im sorry but thats not what Im looking for. Maybe, I should rephrase my question.

weirdpanda Over a year ago

Yeah! Sounded a little confusing.

Alex Coroza Over a year ago

I finished rephrasing my question. I guess its not confusing now.

Alex Coroza Over a year ago

Ah I see. I learned so much from this answer. But what if I have so many ng-models? So I have to assign a default value to each?

weirdpanda Over a year ago

Well, yes. But you can write a small function to automate that. :)

Collectives™ on Stack Overflow

AngularJS Form Validation - Bind input to model eventhough there is input error

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related