Question

我有一个角度/ javascript问题。我写的代码有效，但我想知道为什么这是一个有根据的猜测，我采取了实现这个代码。

代码在做什么？

用户在表单中输入文本，然后将其添加到数组并显示在屏幕上。我想确保用户无法输入空白帖子。下面的JS代码可以工作，但我想知道为什么。我已经检查了代码，并想到了为什么这样做有意义的所有可能原因，但事实并非如此。我希望有人可以消除我的困惑。

我在HTML中的代码如下：

<form ng-submit="addPost()">
     <input type="text" ng-model="title"></input>
     <button type="submit">Post</button>
</form>

<div ng-repeat="post in posts">
     {{post}}
</div>

我的控制器中的功能如下所示：

$scope.addPost = function(){
  if(!$scope.title || $scope.title === '') { return false}
  $scope.posts.push({title: $scope.title, upvotes: 0});
  $scope.title = '';
};

一开始我只有

原始代码

$scope.addPost = function(){
  if($scope.title === ' ') {return false}
  $scope.posts.push({title: $scope.title, upvotes: 0});
  $scope.title = '';
};

这个原始代码对我来说很有意义，但是对于这个代码，用户在输入框中第一次单击提交时它显示了一个空白帖子，但是在后续尝试中它没有显示。

我的问题是为什么我的原始代码允许用户在一个场合输入空白文本。据我所知，它应该与工作的代码一样工作，因为它说$ scope.title是空白会破坏函数。

Answer 1

您需要在表单字段上添加必需的属性才能使表单无效

<强>标记

<form name="form" ng-submit="form.$valid && addPost(form)">
     <input type="text" ng-model="title" required/>
     <button type="submit">Post</button>
</form>

<强>代码

$scope.addPost = function(){
  $scope.posts.push({title: $scope.title, upvotes: 0});
  $scope.title = '';
};

Answer 2

试试这个：

<form name="userForm" ng-submit="addPost()">
     <input type="text" ng-model="title" **required**></input>
     <button type="submit">Post</button>
</form>

<button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button>

如果未输入文本，则禁用“提交”按钮。

Answer 3

你没有初始化$ scope.title。在您的代码中，它在第一个函数调用之前不存在，它初始化此作用域的值

$scope.title = '';

阻止用户以javascript / angular

3 个答案: