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

问题

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.

回答1:

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 = "example@gmail.com";

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

}

来源：https://stackoverflow.com/questions/33591553/angularjs-form-validation-bind-input-to-model-eventhough-there-is-input-error

标签

angularjs

ng-messages