2

I have an angular/javascript question. The code I have written works but I am wondering why as it was an educated guess I took to implement this code.

What is the code doing?

User enters text into the form which is then added to an array and displayed on the screen. I want to ensure that a user cannot enter a blank post. The JS code below works, but I am wondering why. I have examined the code, and thought of all the possible reasons why this would make sense, but it just doesn't. I am hoping someone can eradicate my confusion.

The code I have in my HTML is as follows:

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

The function in my controller looks like this:

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

At the beginning I only had

ORIGINAL CODE

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

This original code makes sense to me, however with this code, the first time the user clicked submit in the input box it displayed a blank post, but on subsequent attempts it did not.

My question is why is my original code allowed a user to enter blank text on one occassion. As far as I can tell it should work the same as the code that works as it is saying if $scope.title is blank break the function.

Improve this question

3 Answers 3

Reset to default
2

You need to add required attribute on form field that will make form as invalid

Markup

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

Code

$scope.addPost = function(){
  $scope.posts.push({title: $scope.title, upvotes: 0});
  $scope.title = '';
};
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

This is coming from another angle which I appreciate but I the code I was using was already working, so wanted a bit of clarification as to why, as it was a bit of a guess that I took, but from one of the answers it now makes sense. Thanks, and have an upvote for helping :-)
@PaulFitzgerald I suggested the better way of doing code..that will handle your form validity on UI
@PaulFitzgerald if you want to implement using a cleaner solution.then you could go for my solution..all up to you..:)
1

Try this : 

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

Here if the text is not entered the button Submit is disabled.

Improve this answer

1 Comment

As I said to the other poster the code I was using was already working, so wanted a bit of clarification as to why, as it was a bit of a guess that I took, but from one of the answers it now makes sense. But still thanks for your input as it provides another alternative
1

You didnt initialized $scope.title. In your code, it doesn't exist before first function call which initialize this scope's value 

$scope.title = '';
Improve this answer

3 Comments

ah this makes sense. This is what was confusing me
In the same way I could actually remove the second part and just say if(!$scope.title){return false} and it also works
look @pankajparkar response, it's not answer to your question but it's better solution to achive your goal

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.