Each form input will need ngModel defined to store the value in the scope. See Directives, ngModel for more information.

Here is a simple form that binds two text inputs:

<form name="form">
  First Name: <input type="text" name="firstname" ng-model="data.firstName" />
  Last Name: <input type="text" name="lastName" ng-model="data.lastName" />
</form>
{{data.firstName}} {{data.lastName}}

Angular will automatically add CSS classes to the form and elements that you can then target with CSS. Here is the list of CSS classes and when they are applied:

Angular has features that make validation very easy. First, Angular will use any of the HTML 5 input types. These allow the browser to do some validation, but Angular will still track any errors.

Next, you can use any of the built-in validation directives of ngModel. The list is required, pattern, minLength, maxLength, min, and max. See Directives, ngModel for more info about each. When an input fails validation, the value will not be passed into the bound scope variable.

Here is an example that sets a minimum length on firstName:

 <form name="form">
  First Name: <input type="text" name="firstname" ng-minlength="10" ng-model="data.firstName" />
  Last Name: <input type="text" name="lastName" ng-model="data.lastName" />
</form>
{{data.firstName}} {{data.lastName}}

When a form is given a name attribute, it is bound to the scope as that name. When inputs are given names in a form, they are bound to that form. This allows you to use other directives with these values.

Here is an example that will show an error message when the text input does not meet the minimum length of 10:

<form name="form">
  First Name: <input type="text" name="firstname" ng-minlength="10" ng-model="data.firstName" />
  <div ng-show="form.firstname.$invalid">First name must be 10 characters!</div>
  Last Name: <input type="text" name="lastName" ng-model="data.lastName" />
</form>
{{data.firstName}} {{data.lastName}}

The validation message will only show when the field is invalid.

The form will have $dirty, $invalid, $pristine, and $valid as properties that can be used in directives or in scope. The inputs will have the same properties and additionally an $error object that will have each of the failed validations as a property. In the preceding example, this means that form.firstname.$error.minLength will return true when the input has failed that validation and false when it is valid.

firstModule.directive('notJosh', function () {
  return {
    require: 'ngModel',
    link: function (scope, element, attrs, ctrl) {
      ctrl.$parsers.unshift(function (viewValue) {
        if (viewValue.toUpperCase() === 'JOSH') {
          ctrl.$setValidity('notJosh', false);
          return undefined
        }
        else {
          ctrl.$setValidity('notJosh', true);
          return viewValue;
        }
      });
    }
  }
});