проверка пароля с угловым 8

Question

Как реализовать проверку пароля, выполнив следующие условия с Angular 8:

Пароль должен содержать не менее 8 символов, по крайней мере 1 номер и 1 специальный символ из 8 специальных символов! @ # $%[] {}

Необходимо показывать сообщения на лету, когда определенное условие не выполняется. Так как это реализовать.

У меня есть эта форма с кодом ниже:

<form role="form" #heroForm="ngForm">           
            <div class="form-group row">
              <label class="col-md-0 control-label"></label>
              <div class="col-md-5">
                <mat-form-field class="full-width">
                  <input required [(ngModel)]="member.password" name="pass" id="pass" type="password" matInput
                    placeholder="Password" min="8">
                  <mat-error>Required</mat-error>
                </mat-form-field>
              </div>
              <div class="col-md-5">
                <mat-form-field class="full-width">
                  <input required [(ngModel)]="member.confirmPassword" name="pass" id="confirmPassword" type="password"
                    matInput placeholder="Confirm password" min="8">
                  <mat-error>Required</mat-error>
                </mat-form-field>
              </div>
            </div>
</form>

Answer 1

Вы можете использовать проверку регулярных выражений, а для действительных регулярных выражений вы можете включить кнопку

Проверить эту ссылку

https://www.thepolyglotdeveloper.com/2015/05/use-regex-to-test-password-strength-in-javascript/

Или вы можете использовать шаблон атрибута и установитьтам есть регулярное выражение и установите валидацию шаблона в поле пароля следующим образом:

pattern = "[A-Za-z] {3}"

Answer 2

Добавить шаблон на входном уровне pattern = "^ (? =. [0-9]) (? =. [! @ # \ $% \ ^ & *]) (? =. {8,}) "

Теперь есть несколько способов сделать это. Если вы используете динамические формы или уровень HTML

, давайте сделаем с FormControl: first instantiate:

password= new FormControl(); 

Затем поместите атрибут formControl на входном уровне:

<input required [formControl]="password" [(ngModel)]="member.password" pattern="^(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})" name="pass" id="pass" type="password" matInput
   placeholder="Password" min="8"/>

Тогдапоказать ошибку, как показано ниже:

 <mat-error *ngIf="username.errors?.pattern">Password not valid</mat-error>

Есть другой способ сделать это FormBuilder. См. Документы.