javascript - Angular js 表单输入中的 $isEmpty 功能

Question

我的代码看起来像这样 -

<form name="myForm" ng-submit="!myForm.phone.$isEmpty(this.$viewValue)" action="/my/url" method="get">
<input name="phone">
<button type="submit">submit</button>
</form>

现在，即使我填写了电话号码字段，也无法提交表单。

但是如果我这样编码:

<form name="myForm" ng-submit="!myForm.phone.$isEmpty(myForm.phone.$viewValue)" action="/my/url" method="get">
<input name="phone">
<button type="submit">submit</button>
</form>

现在工作正常。

所以困难在于“这个”。我什至无法检查它的上下文，它应该是 $scope.myForm.phone 的上下文，但不知何故它不是。有人可以解释一下吗？

Answer 1

这不是 ng-submit 的用途。 ng-submit 是提交表单时调用的函数或表达式。这与验证无关。如果您想确保文本字段在提交之前不为空，您只需添加 required ，然后如果它为空，myForm.$invalid 将为 true。

这是您想要做的吗:

html

<form name="myForm" ng-submit="submit(phone)">
    <input name="phone" type="text" ng-model="phone.value" required>
    <button type="submit" ng-disabled="myForm.$invalid" >submit</button>
</form>

Controller

$scope.submit = function(phone){
    console.log('phone', phone);
}

$scope.phone = {
    value: ''
};

更新

您传递到 ng-submit 中的 this 是对 Controller 的引用。由于您已将 name 属性设置为 myForm，因此您可以通过 this.myForm 访问表单模型，并通过 this 访问手机模型。 myForm.phone。因此，如果您想使用 $isEmpty 来验证该字段是否为空，您必须使用:

this.myForm.phone.$isEmpty(this.myForm.phone.$viewValue)