AngularJS表单验证 - 绑定输入到模型eventhough有输入错误的 [英] AngularJS Form Validation - Bind input to model eventhough there is input error
问题描述
我已经使用内置的angularjs表单验证和NG的消息的形式。看看这个code。
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>
如果输入犯规触发一个错误，那么如果CONSOLE.LOG（$ scope.applicant.firstName）;,它打印的值，但如果输入有错误，执行console.log（$ scope.applicant.firstName ）;是不确定的。
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.
有没有一种方法，使角（也许是因为NG-消息）绑定输入的值，即使它有错误？我想打的console.log（$ scope.applicant.firstname）;打印的值即使输入有错误。
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.
推荐答案
编辑：在您改写的问题
我记得我面临编写应用程序时同样的问题;当你有10000+线code，你能想象的情况。现在，如果我清楚地了解它，你想 applicant.firstName 有，即使验证失败一定的价值？如果是这样的情况下，如何让作品角度我给你解释一下。
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.
当你定义一个字段作为 NG-模型，角的内部对这一领域的管理两个值：
Whenever you define a field as an ng-model, the internals of Angular manage two values for this field:
- $ modelValue
- $ viewValue
你可能已经从这些变量的名字猜到了，$ modelValue是由模型使用的输入实例的值，而 $ viewValue 使用显示它，等等（ AngularJS ngModel ）
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)
我们的角处要好的朋友是做了pretty有用：只要输入字段没有通过考试， $ modelValue 设置为未定义。所以，当你试图获取模型的价值，角发现它是空的，因此会返回一个未定义。此外，当验证失败，＆LT; parentForm方式＆gt; $无效切换到真正。
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.
简单的附加：
$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
}
这篇关于AngularJS表单验证 - 绑定输入到模型eventhough有输入错误的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
