1

我有一个使用内置 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); 即使输入有错误，也要打印该值。

4

1 回答 1

3

编辑：在你改写问题后

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

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

  1. $模型值
  2. $viewValue

正如您可能从这些变量的名称中猜到的那样， $modelValue 是模型要使用的输入实例的值，$viewValue用于显示它等（AngularJS ngModel）

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

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

简单添加：

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

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

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

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

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

    ... // Continue normal execution

}
于 2015-11-08T07:14:04.633 回答