AngularJS Models: Real‐Time Forms with ng‐model - FadiZahhar/AngularJs GitHub Wiki

One morning, the StartApp team gets an email from a client:

“Can you make a signup form where everything updates right away as users type? For example, a live preview of their email and password as they fill the form. No submit button needed—just instant feedback!”

Sara: “AngularJS has ng-model for this! It lets us sync input fields with variables instantly.”

Mike: “Let’s see it in action and show the client how easy it is!”

• ng-model is an AngularJS directive that binds the value of HTML controls (like input, select, textarea) to application data.
• It creates two-way data binding—if the input changes, the model updates, and if the model changes, the input updates!

Sara codes a signup preview:

<div ng-app>
  <h3>Signup Form</h3>
  <p>Name: <input ng-model="name"></p>
  <p>Email: <input ng-model="email"></p>
  <h4>Live Preview:</h4>
  <p>Name: {{ name }}</p>
  <p>Email: {{ email }}</p>
</div>

Result: As the user types, the preview updates in real time.

Mike adds a password field with instant feedback:

<div ng-app>
  <p>Password: <input ng-model="password" type="password"></p>
  <p ng-show="password && password.length < 6">Password too short!</p>
  <p ng-show="password && password.length >= 6">Strong password 💪</p>
</div>

Result: Users instantly see feedback based on what they type.

Lina wants a registration form summary:

<div ng-app>
  <p>Username: <input ng-model="username"></p>
  <p>Email: <input ng-model="useremail"></p>
  <p>Country: 
    <select ng-model="country">
      <option value="Lebanon">Lebanon</option>
      <option value="UAE">UAE</option>
      <option value="USA">USA</option>
    </select>
  </p>
  <h4>Registration Summary:</h4>
  <p>User: {{ username }}, Email: {{ useremail }}, Country: {{ country }}</p>
</div>

Result: Every selection updates the summary immediately.

• Sara: “Every input with ng-model is linked to a variable. Change the input, and AngularJS changes the variable for us.”
• Mike: “And vice versa! If we set the variable in code, the field updates too.”
• Lina: “We can add live previews, validations, and instant messages—all without extra JS!”

Let’s create a list where each item can be checked off:

<div ng-app ng-init="tasks=[
  {name:'Design', done:false},
  {name:'Code', done:false}
]">
  <ul>
    <li ng-repeat="t in tasks">
      <input type="checkbox" ng-model="t.done">
      <span ng-show="t.done"><s>{{ t.name }}</s></span>
      <span ng-hide="t.done">{{ t.name }}</span>
    </li>
  </ul>
</div>

Result: Checking a task instantly updates its appearance.

Can you create a live calculator with two fields, showing their sum below? (Try using ng-model.)

Sara’s solution:

<div ng-app>
  <input ng-model="a" placeholder="First number">
  <input ng-model="b" placeholder="Second number">
  <p>Sum: {{ a*1 + b*1 }}</p>
</div>

• ng-model binds form fields and variables for real-time feedback.
• Enables live previews, validations, and smart forms with little effort.
• Makes user experience smooth and modern!

Lina: “Now I can design forms that show errors and previews instantly—no need to wait for a submit!”

Mike: “Next up, let’s look at custom validations and how ng-model fits into bigger forms!”

Try all these examples live in the [W3Schools AngularJS TryIt Editor](https://www.w3schools.com/angular/angular_tryit.asp?filename=tryangular_model).