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）;,它会输出值，但是如果输入有错误，则控制台.log（$ scope.applicant.firstName ）;变得不确定。

有没有办法使角度（或者因为ng-messages）绑定输入的值，即使它有错误？我想制作console.log（$ scope.applicant.firstname）;即使输入有错误也要打印该值。

Answer 1

编辑：在你重新提出问题之后

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

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

$ modelValue
$ viewValue

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

我们在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

}

AngularJS表单验证 - 将输入绑定到模型，尽管存在输入错误

1 个答案: