ng-pattern validation

[nikh kkvv]

In below code snippet for password validation working fine initially. But after adding ng-pattern in user password and confirm password section. But after this validation its showing password mismatch. But if i remove ng-pattern its working fine. How can i resolve this issue. validation is added for upper case lower case and special characters..

        <div class="column medium-6">

           <!-- Password -->

           <div class="field-group-container">

            <label for="password">User password</label>

            <p class="label__helper-text">Password must between <span class="nowrap">{{modalCtrl.minPasswordLength}} – {{modalCtrl.maxPasswordLength}}</span> characters</p>

            <input id="password"

                   name="password"

                   type="password"

                   ng-minlength="modalCtrl.minPasswordLength"

                   ng-maxlength="modalCtrl.maxPasswordLength"

   ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[_!@#\$%\^&\*])(?=.{8,})$/"

                   autocomplete="new-password"

                   ng-required="modalCtrl.user.new || form.password.$touched || form.passwordConfirm.$touched"

                   ng-model="modalCtrl.user.password"

                   password-visibility-toggle

                   ng-click="form.password.$setTouched()"

                   placeholder="{{

                    (modalCtrl.user.new ||

                    form.password.$touched ||

                    form.passwordConfirm.$touched) ? '' : '******'}}"/>

            <div ng-if="form.password.$invalid && form.password.$dirty" class="form__validation-message">

              <span ng-show="form.password.$error.required">

                Field is required</span>

              <span ng-show="form.password.$error.minlength || form.password.$error.maxlength">

                Length must be between <span class="nowrap">{{modalCtrl.minPasswordLength}} – {{modalCtrl.maxPasswordLength}}</span> characters</span>

            </div>

          </div>

          <!-- Password confirm -->

          <div class="field-group-container">

            <label for="passwordConfirm">Confirm user password</label>

            <input id="passwordConfirm"

                   name="passwordConfirm"

                   type="password"

                   ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[_!@#\$%\^&\*])(?=.{8,})$/"

                   autocomplete="new-password"

                   ng-required="modalCtrl.user.new || form.password.$touched || form.passwordConfirm.$touched"

                   ng-model="modalCtrl.user.passwordConfirm"

                   password-visibility-toggle

                   password-confirm

                   first-password="form.password.$modelValue"

                   ng-click="form.passwordConfirm.$setTouched()"

                   placeholder="{{(

                    modalCtrl.user.new ||

                    form.password.$touched ||

                    form.passwordConfirm.$touched) ? '' : '******'}}"/>

            <div ng-if="form.passwordConfirm.$invalid && form.passwordConfirm.$dirty" class="form__validation-message">

              <span ng-show="form.passwordConfirm.$error.required">

                Field is required</span>

              <span ng-show="form.passwordConfirm.$error.passwordConfirm"

                    ng-hide="form.passwordConfirm.$error.required">

                Passwords do not match</span>

              <span ng-show="form.passwordConfirm.$error.minlength || form.passwordConfirm.$error.maxlength">

                Length must be between <span class="nowrap">1 – 16</span> characters</span>

            </div>

          </div>

        </div>

      </div>

    </div>