ionic-framework - 离子形式的密码模式

Question

我在将密码模式设置为“密码必须包含至少 8 个字母、一个小写和一个大写字母、一个数字和一个特殊字符”时遇到问题。我已经使用了验证器模式，但它不起作用。

下面是我的代码：

.html 文件：

<ion-content>

<div style="margin: 30px">
<ion-title class="ion-text-center" >Register</ion-title>

<form [formGroup]="loginForm">
<ion-item>
    <ion-label position="floating">First Name*</ion-label>
    <ion-input formControlName="fname" type="text" ></ion-input>
  </ion-item>
  <div class="error-messages">
    <ng-container *ngFor="let error of error_messages.fname">
      <div class="error-message" *ngIf="loginForm.get('fname').hasError(error.type) && (loginForm.get('fname').dirty || loginForm.get('fname').touched)">
        {{ error.message }}
      </div>
    </ng-container>

  </div>
  <ion-item>
      <ion-label position="floating" >Last Name*</ion-label>
      <ion-input formControlName="lname" type="text" ></ion-input>
    </ion-item>
    <div class="error-messages">
      <ng-container *ngFor="let error of error_messages.lname">
        <div class="error-message" *ngIf="loginForm.get('lname').hasError(error.type) && (loginForm.get('lname').dirty || loginForm.get('lname').touched)">
          {{ error.message }}
        </div>
      </ng-container>

    </div>
   <ion-item>
  <ion-label position="floating" >Email Id*</ion-label>
 <ion-input formControlName="email" type="text" ></ion-input>
  </ion-item>
  <div class="error-messages">
 <ng-container *ngFor="let error of error_messages.email">
<div class="error-message" *ngIf="loginForm.get('email').hasError(error.type) && (loginForm.get('email').dirty || loginForm.get('email').touched)">
  {{ error.message }}
</div>
 </ng-container>

  </div>

<ion-item>
 <ion-label position="floating" >Password*</ion-label>
<ion-input formControlName="password" type="password" ></ion-input>
</ion-item>
<div class="error-messages">
<ng-container *ngFor="let error of error_messages.password">
  <div class="error-message" *ngIf="loginForm.get('password').hasError(error.type) && (loginForm.get('password').dirty || loginForm.get('password').touched)">
    {{ error.message }}
  </div>
  </ng-container>

  </div>


    <br>
 <div>
   <ion-button [disabled]="!loginForm.valid" expand="full">Signup</ion-button>
</div>

.ts 文件：

   import { Component, OnInit } from '@angular/core';
    import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';

     @Component({
 selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  loginForm: FormGroup;

  error_messages = {
  'fname': [
   { type: 'required', message: 'First Name is required.'},
],

'lname': [
  { type: 'required', message: 'Last Name is required.'}
],

'email': [
  { type: 'required', message: 'Email is required.'},
  { type: 'required', message: 'please enter a valid email address.'}
],

'password': [
  { type: 'required', message: 'password is required.'},
  { type: 'pattern', message: 'Password must be contain atleast 8 letters one lowercase and one uppercase letter one digit and one special character.'}
],

 }

    constructor(
    public formBuilder: FormBuilder
   ) {
     this.loginForm = this.formBuilder.group({
    fname: new FormControl('', Validators.compose([
    Validators.required
    ])),
    lname: new FormControl('', Validators.compose([
    Validators.required
    ])),
     email: new FormControl('', Validators.compose([
    Validators.required,

  ])),
  password: new FormControl('', Validators.compose([
    Validators.required,
    Validators.minLength(8),
    Validators.maxLength(30),
    Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9]+$')
  ])),


   });

 }

 ngOnInit() {
 }

}

输入密码应至少包含 8 个字符，一个大写字母，一个小写字母，一个数字和一个特殊字符。

请帮我解决这个问题。谢谢你。

标签： ionic-framework

Answer 1

.html 文件

    <ion-item>
    <ion-label position="floating">
      <img src="../assets/icon/key-icon.png"/>
      <!-- <ion-icon name="mail" mode="ios" color="primary" "></ion-icon> -->
      Password
    </ion-label>
    <ion-input [type]="passwordType" formControlName="password"></ion-input>
    <ion-icon name="eye" [color]="passwordShown === true ? 'primary' : 'light'" slot="end" (click)="togglePassword()"></ion-icon>
  </ion-item>
  <ion-item no-padding lines="none" class="validator-error"
      *ngIf="registration_form.controls.password.hasError('required') && registration_form.controls.password.touched">
      <p>Please Enter a Password!</p>
    </ion-item>
    <ion-item no-padding lines="none" class="validator-error"
      *ngIf="registration_form.controls.password.hasError('minlength') && registration_form.controls.password.touched">
      <p>The password needs at least 8 characters.</p>
    </ion-item>
    <ion-item no-padding lines="none" class="validator-error"
      *ngIf="registration_form.controls.password.hasError('pattern') && registration_form.controls.password.touched">
      <p>Please Enter One Upper Case and One Lower Case, One Spacial Characters and One Number</p>
    </ion-item>

ts.文件

 password: [null, Validators.compose([
    Validators.required,
    Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{7,}'),
    Validators.minLength(8)
  ])]