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: ''
};

<强>更新

您传递到this的{{1}}是对您的控制器的引用。由于您将ng-submit属性设置为name，因此您可以通过myForm访问表单模型，并通过this.myForm访问手机模型。因此，如果您想使用this.myForm.phone验证字段是否为空，则必须使用：

$isEmpty

Answer 2

ng-submit用于提供表单IS提交时的处理程序。您要查找的是submit

禁用ng-disabled按钮

<form name="myForm" ng-submit="functionInController()" action="/my/url" method="get">
<input name="phone" required>
<button type="submit" ng-disabled="myForm.$invalid">submit</button>
</form>

注意添加到输入的required指令。这样可以确保此字段对于提交

不为空

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

2 个答案: