防止用戶在窗體中輸入空白帖子javascript/angular

我有一個角度/ javascript問題。我編寫的代碼很有用，但我想知道爲什麼這是我爲了實現這個代碼而進行的有教育的猜測。防止用戶在窗體中輸入空白帖子javascript/angular

代碼在幹什麼？

用戶將文本輸入到表單中，然後將該表單添加到數組中並顯示在屏幕上。我想確保用戶不能輸入空白帖子。下面的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 = ''; 
};

在開始的時候我只用了

ORIGINAL代碼

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

這個原始代碼對我來說很有意義，但是通過這段代碼，用戶第一次在輸入框中點擊提交時，它會顯示一個空白帖子，但是在後續嘗試中沒有。

我的問題是爲什麼我的原始代碼允許用戶在一個場合輸入空白文本。據我可以告訴它應該工作相同的代碼工作，因爲它說如果$ scope.title是空白的中斷函數。這裏

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

如果文本沒有輸入按鈕提交被禁用：

來源

2015-05-04 Paul Fitzgerald

您需要添加表單字段必需的屬性，這將使表單無效

標記

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

來源

2015-05-04 11:18:07

這是從另一個角度來我欣賞但我我用的是已經工作的代碼，所以想有點澄清，爲什麼，因爲這是一個有點，我拿了，但是從其中一個答案，現在是有道理的一個猜測。感謝，並有幫助:-) –

@PaulFitzgerald的給予好評，我建議做code..that將處理在UI –

表單有效性的更好的方法謝謝@pankajapakar –

試試這個。

來源

2015-05-04 11:16:53 Pracede

正如我對另一張海報所說的那樣，我使用的代碼已經在工作，所以想澄清一下爲什麼，因爲這是我猜的一個猜測，但是從其中一個答案開始，現在它是有意義的。但仍然感謝您的意見，因爲它提供了另一種替代 –

你沒有初始化$ scope.title。在你的代碼，它不會第一個函數調用，它初始化這個範圍的值之前存在

$scope.title = '';

來源

2015-05-04 11:17:35 Mike

啊這是有道理的。這就是讓我困惑的東西 –

以同樣的方式，我可以刪除第二部分，只是說'''if（！$ scope。標題）{返回false}'''，它也適用 –

看@pankajparkar響應，它不回答你的問題，但它是更好的解決方案才達到你的目標 – Mike

防止用戶在窗體中輸入空白帖子javascript/angular

回答

相關問題