validate input text with angularJS - html

Question

I've got a form which adds items in my todo list array.
However if the input field is empty, my function is adding an empty value to my array.
What is the best way to validate the form?
<form name="formaddtodo" ng-submit="todoList.addTodo()">
<input type="text" ng-model="todoList.todoText" ng-minlength="1" size="30"
placeholder="Voeg nieuwe todo toe">
<input class="btn-primary" type="submit" value="voeg toe">
</form>
Here is my function
todoList.addTodo = function() {
todoList.todos.push({text:todoList.todoText, done:false});
todoList.todoText = '';
};
There is no validation yet but I'm curious what the best way is to validate.
Thank you in advance!

Answer 1

You can use the built-in ngRequired directive:
<input type="text" ng-model="todoList.todoText" ng-minlength="1" size="30"
placeholder="Voeg nieuwe todo toe" ng-required="required">
AngularJS provides basic implementation for most common HTML5 input
types: (text, number, url, email, date, radio, checkbox), as well as
some directives for validation (required, pattern, minlength,
maxlength, min, max).
https://docs.angularjs.org/guide/forms

Answer 2

<form name="formaddtodo" ng-submit="todoList.addTodo(formaddtodo.$valid)">
<input type="text" ng-model="todoList.todoText" ng-minlength="1" size="30"
placeholder="Voeg nieuwe todo toe" required>
<input class="btn-primary" type="submit" value="voeg toe">
</form>
todoList.addTodo = function(isValid) {
if(isValid) {
todoList.todos.push({text:todoList.todoText, done:false});
todoList.todoText = '';
}
};
I think the above code will help you to validate your form.

Answer 3

ngMessages module support for displaying messages to the user for form validation.
ngMessages, developers were forced to rely on directives such as ng-class and ng-show to display these errors.
Please follow this link. It might be useful for you now and in future use for validation with AngulerJS.