(function() {
  'use strict';

  angular.module('app.components')
    .config(userForm);

  /** @ngInject */
  function userForm(FormsProvider) {
    FormsProvider.register('userForm', {
      fields: [
        {
          className: 'forms__body',
          fieldGroup: [
            {
              key: 'first_name',
              type: 'text',
              templateOptions: {
                label: 'First Name',
                required: true,
                placeholder: 'Enter a first name.'
              },
              validation: {
                messages: {
                  required: '"A first name must be provided"'
                }
              }
            },
            {
              key: 'last_name',
              type: 'text',
              templateOptions: {
                label: 'Last Name',
                required: true,
                placeholder: 'Enter a last name.'
              },
              validation: {
                messages: {
                  required: '"A last name must be provided"'
                }
              }
            },
            {
              key: 'email',
              type: 'text',
              templateOptions: {
                label: 'Email',
                type: 'email',
                required: true,
                placeholder: 'Enter a valid email address.'
              },
              validation: {
                messages: {
                  required: '"A email address must be provided"'
                }
              }
            },
            {
              key: 'phone',
              type: 'text',
              templateOptions: {
                label: 'Phone Number',
                required: true,
                placeholder: 'Enter a valid phone number.'
              },
              validation: {
                messages: {
                  required: '"A phone number must be provided"'
                }
              }
            },
            {
              key: 'password',
              type: 'password',
              templateOptions: {
                label: 'Password',
                placeholder: 'Enter a password.',
                minlength: 8
              },
              expressionProperties: {
                'templateOptions.required': '!model.id'
              },
              validation: {
                messages: {
                  required: '"A password must be provided"'
                }
              }
            },
            {
              key: 'password_confirmation',
              type: 'password',
              templateOptions: {
                label: 'Confirm Password',
                placeholder: 'Confirm the password.',
                minlength: 8
              },
              expressionProperties: {
                'templateOptions.required': 'model.password'
              },
              validation: {
                messages: {
                  required: '"A password confirmation must be provided"'
                }
              }
            },
            {
              key: 'role',
              type: 'select',
              templateOptions: {
                label: 'Role',
                options: [
                  {label: 'User', value: 'user'},
                  {label: 'Manager', value: 'manager'},
                  {label: 'Admin', value: 'admin'},
                ],
                required: true
              },
              validation: {
                messages: {
                  required: '"An user status is required."'
                }
              }
            }
          ]
        }
      ]
    });
  }
})();

@@ -2549,32 +2549,85 @@
 pe: 'password',%0A
+              extras: %7BvalidateOnModelChange: true%7D,%0A
               te
@@ -2720,19 +2720,28 @@
 r: '
-Confirm the
+Please re-enter your
  pas
@@ -2737,33 +2737,32 @@
 er your password
-.
 ',%0A             
@@ -2902,32 +2902,120 @@
              %7D,%0A
+              validators: %7B%0A                samePassword: samePassword%0A              %7D,%0A
               va
@@ -3118,32 +3118,94 @@
 st be provided%22'
+,%0A                  samePassword: '%22Must match your password%22'
 %0A               
@@ -3826,16 +3826,115 @@
 %0A    %7D);
+%0A%0A    function samePassword(view, model, scope) %7B%0A      return view === scope.model.password;%0A    %7D
 %0A  %7D%0A%7D)(

Add password confirmation matching on user form