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

时间:2016-08-17 20:06:02

标签: javascript jquery angularjs validation

我需要确保用户在使用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>

我从this SO post获取的HTML-click代码:

<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。所以我需要在函数运行之前进行验证。我从另一篇文章中获得的片段应该可以工作,但我不知道为什么它不是。

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

现在消息框是我的,下面的另一个是别人的工作小提琴。我不明白为什么我的工作不起作用。

有人能告诉我我做错了吗?

2 个答案:

答案 0 :(得分:2)

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

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

更新

抱歉,我第一次分享你的小提琴链接。它现在更新。

答案 1 :(得分:1)

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