AngularJS Forms: Smarter User Input, Instantly - FadiZahhar/AngularJs GitHub Wiki

The StartApp Team Builds Real-World Forms

Scene: Ready for Real Users

The client comes back with a classic feature request:

“Please make a real registration form! It should show a live preview as users fill it out, and let’s display some validation messages to help them get it right.”

Lina (Designer):
“We want it to look good, update instantly, and guide users as they type.”

Sara (Junior Dev):
“That’s what AngularJS forms are perfect for! With ng-model, we get live updates, and Angular even helps us track validity.”

1. Building a Basic AngularJS Form

Sara starts simple:

<form ng-app="formApp" ng-controller="formCtrl">
  <p>Name: <input ng-model="user.name"></p>
  <p>Email: <input ng-model="user.email"></p>
  <p>Password: <input type="password" ng-model="user.password"></p>
</form>
<h4>Live Preview:</h4>
<p>Name: {{ user.name }}</p>
<p>Email: {{ user.email }}</p>

Everything the user types appears instantly in the preview—thanks to ng-model.

2. Adding Validation with AngularJS

Mike (Team Lead):
“How do we help users avoid mistakes before submitting?”

AngularJS tracks form and input state using special properties:

<form name="regForm">
  <p>
    Name: <input name="name" ng-model="user.name" required>
    <span ng-show="regForm.name.$touched && regForm.name.$invalid">Required!</span>
  </p>
  <p>
    Email: <input name="email" ng-model="user.email" required>
    <span ng-show="regForm.email.$touched && regForm.email.$invalid">Required!</span>
  </p>
  <p>
    Password: <input type="password" name="password" ng-model="user.password" ng-minlength="6" required>
    <span ng-show="regForm.password.$touched && regForm.password.$invalid">
      Must be at least 6 characters!
    </span>
  </p>
  <button ng-disabled="regForm.$invalid">Submit</button>
</form>

ng-show only displays messages when a field is touched and invalid.
The Submit button is disabled unless the form is valid.

3. Advanced: Showing Form States

Sara:
“AngularJS forms have useful properties for every field and the whole form:”

Property	What it Means
$valid / $invalid	Is input/form valid?
$touched / $untouched	Has the user focused out?
$dirty / $pristine	Has the field changed?

Example:

<p ng-show="regForm.name.$dirty && regForm.name.$valid">Thanks for your name!</p>

4. Full Example: Registration with Validation and Live Preview

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="formApp" ng-controller="formCtrl">
  <form name="regForm">
    <p>
      Name: <input name="name" ng-model="user.name" required>
      <span ng-show="regForm.name.$touched && regForm.name.$invalid">Required!</span>
    </p>
    <p>
      Email: <input name="email" ng-model="user.email" required>
      <span ng-show="regForm.email.$touched && regForm.email.$invalid">Required!</span>
    </p>
    <p>
      Password: <input type="password" name="password" ng-model="user.password" ng-minlength="6" required>
      <span ng-show="regForm.password.$touched && regForm.password.$invalid">Must be at least 6 characters!</span>
    </p>
    <button ng-disabled="regForm.$invalid">Submit</button>
  </form>
  <h4>Live Preview:</h4>
  <p>Name: {{ user.name }}</p>
  <p>Email: {{ user.email }}</p>
</div>
<script>
angular.module('formApp', []).controller('formCtrl', function($scope) {
  $scope.user = {};
});
</script>
</body>
</html>

5. Team Discussion: Why Use AngularJS Forms?

Sara: “We get real-time updates, validation, and error messages—all with hardly any code.”
Lina: “It’s easy to keep the user on track and prevent mistakes.”
Mike: “Cleaner code, fewer bugs, and a better experience for everyone!”

Quick Team Challenge: Add a Confirm Password Field

Can you add a “Confirm Password” input that shows a message if it doesn’t match the first password?

Hint: Use ng-model="user.confirm" and compare user.password to user.confirm.

Key Takeaways

AngularJS forms are dynamic, interactive, and user-friendly.
Use ng-model for live data, validation directives (required, ng-minlength), and form state properties for instant feedback.
AngularJS disables submission until everything is valid—making safe, modern forms easy!

Team Conclusion

Lina:
“Our forms look great, guide users, and prevent bad input. Let’s move on to form submission and maybe even routing next!”

Try these examples live in the W3Schools AngularJS TryIt Editor.

Want the next chapter, or a single file with all chapters so far? Just let me know!