AngularJS 表单验证 - 即使存在输入错误也将输入绑定到模型

Question

我有一个使用内置 angularjs 表单验证和 ng-messages 的表单。看看这段代码。

<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);变得不确定。

有没有办法让 angular（或者可能是因为 ng-messages）绑定输入的值，即使它有错误？我想制作 console.log($scope.applicant.firstname);即使输入有错误也打印值。

Answer 1

编辑：在您改写问题后

我记得我在编写应用程序时遇到过同样的问题；当你有 10000+ 行代码时，你可以想象这种情况。现在，如果我理解得很清楚，即使验证失败，您也希望 applicant.firstName 具有一些价值？如果是这样，让我向您解释一下 Angular 是如何工作的。

每当您将字段定义为 ng-model 时，Angular 的内部会管理该字段的两个值：

$模型值
$viewValue

从这些变量的名称你可能已经猜到，$modelValue 是模型要使用的输入实例的值，$viewValue 用于显示它等。(AngularJS ngModel)

我们在 Angular 的好朋友做了一些非常有用的事情：只要输入字段没有通过测试，$modelValue 就会被设置为未定义。因此，当您尝试获取该模型的值时，Angular 发现它是空的，因此 returns 是未定义的。此外，当验证失败时，<parentForm>.$invalid 将切换为 true。

对于你的情况，你可以给它一个默认值；因此，即使验证失败，您也会获得一些价值。

简单添加：

$scope.applicant.firstName = "example@gmail.com";

在控制器中获取一个值，即使验证失败。

是啊！您可以检查该值是否未定义并退出该函数。这是最好的方法。

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

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

    ... // Continue normal execution

}

AngularJS 表单验证 - 即使存在输入错误也将输入绑定到模型

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

angularjs

ng-messages