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 将为真。

这就是你想要做的吗:

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>

控制者

$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)