AngularJS - 在使用 ng-click 运行函数之前需要输入字段

Posted 2023-05-09

【中文标题】AngularJS - 在使用 ng-click 运行函数之前需要输入字段

【英文标题】：AngularJS - Require input field before running function with ng-click

【发布时间】：2016-12-24 15:03:30

【问题描述】：

我需要确保用户在使用 ng-click 提交表单之前将消息放入 textarea 框中。

这是点击 ng-click 时要运行的函数：

$scope.reject = function() 
  $http.post( 'http://server.com/api/reject/' + carID,  Message: Message  ).
  success(function(data) 
    $scope.output = data;
  )

这是我的 html：

<div id="reject" class="animated">
  <h3>WARNING</h3>
  <p>Your are about to <strong><u>REJECT</u></strong> this CAR. Are you sure this is the action that you want to take?</p>
  <form name="reject">
    <textarea placeholder="Message" ng-model="Message" ng-required="true"></textarea>
    <button ng-click="reject.$valid && reject()">Reject</button>
  </form>
</div>

我的 HTML ng-click 代码来自 this SO post:

<form name="myform">
  <input type="text" ng-model='name' ng-required="true" />
  <button ng-click="myform.$valid && preview()">Preview</button>
  <button ng-click="myform.$valid && update()">Update</button>
</form>

但由于某种原因，这对我不起作用。如果我删除 forward.$valid && 并将其设置为 ng-click="reject() 它运行得很好，尽管我仍然可以在不输入消息的情况下运行它。我需要 textarea 是必需的。所以我需要在函数运行之前进行验证。我从其他帖子下的 sn-p 应该可以工作，但我不知道为什么不行。

编辑 - 这是一个小提琴：My Fiddle

现在消息框是我的，下面的另一个是其他人的工作小提琴。我不明白为什么我的不工作。

谁能告诉我我做错了什么？

【问题讨论】：

reject.$valid 不会为假，因为如果未填充 ，则表单无效。这将是无效的，因为它是<code>ng-required</code>。因此，该函数不会运行。

能否请您在 plunkr/fiddle 中重现该问题？

jsfiddle.net/r8d1uq0L/224 ........现在消息框是我的，下面的另一个是其他人的工作小提琴。我不明白为什么我的不工作

【参考方案1】：

我在您的工作预览函数中插入了一个 console.info，发现您在 $scope 上的拒绝值正在注册为构造函数。我只能猜测你找到了一个关键字。我将函数的名称更改为reject2，它作为一个函数出现并运行您请求的警报。这是一个有效的fiddle

$scope.reject2 = function() 
    alert("hi");
  
ng-click="reject.$valid && reject2()

更新

对不起，我第一次分享了你的小提琴链接。现在更新了。

【讨论】：

是的，我没有意识到表单名称和函数名称需要不同。感谢您的帮助

【参考方案2】：

您需要将reject 更改为<form> 和ng-click 以及其他任何地方的其他内容。这是一个受保护的关键字。

【讨论】：

根本不是这样。 jsfiddle.net/r8d1uq0L/225 在这个小提琴中更改它仍然无法正常工作。

@agon024 不要将表单和函数命名为同一个东西。这是根本问题。 Here 就是证据。