AngularJS — Forms

Basic Form

<form ng-submit="submitForm()">
  <input ng-model="user.name" required>
  <input ng-model="user.email" type="email" required>
  <button type="submit">Submit</button>
</form>

Form Validation

<form name="myForm" ng-submit="submitForm()">
  <input name="email" ng-model="user.email" required email>
  <span ng-show="myForm.email.$error.required">Required</span>
  <span ng-show="myForm.email.$error.email">Invalid email</span>
</form>

Validation States

State	Description
$valid	Form/field is valid
$invalid	Form/field is invalid
$pristine	Not modified
$dirty	Modified by user

Input Types

<input ng-model="data.text" type="text">
<input ng-model="data.email" type="email">
<input ng-model="data.password" type="password">
<input ng-model="data.number" type="number">
<input ng-model="data.date" type="date">
<input ng-model="data.checkbox" type="checkbox">
<input ng-model="data.radio" type="radio" value="option1">

Select

<select ng-model="selectedCountry">
  <option value="">Select Country</option>
  <option ng-repeat="country in countries" value="{{country.code}}">
    {{country.name}}
  </option>
</select>

Mini Practice

1. Create a form
2. Add validation
3. Display error messages
4. Handle form submission

Up Next

Continue with Input — working with inputs.