时间戳

首页 > 解决方案 > 我试图在角度做密码强度

html - 我试图在角度做密码强度

问题描述

我正在尝试在控制台中使用 Angular 中的大写、小写、数字和特殊字符来做密码强度，但我遇到了错误。

NullInjectorError：没有密码强度提供者！在 passwordstrength.ts 文件中

HTML


    <div class="validation_errors text-left">
                            <ng-container *ngFor="let validation of validationmessages.password">
                              <div class="error-message"
                                *ngIf="loginform.get('password')?.hasError(validation.type) && (loginform.get('password')?.dirty || loginform.get('password')?.touched)">
    
                                <span> {{ validation.message }}</span>
                  <p class="help is-danger"
                  *ngIf="loginform.get('password')?.hasError('strong')">
                  Must have at least one number, one lowercase and one uppercase letter.</p>
                              </div>
                            </ng-container>
                          </div>

ts

     this.loginform = this.formbuilder.group({
              username: ['', Validators.required],
              password: ['', passwordstrength.strong]
            });
          }

密码强度.ts

  import { FormControl } from '@angular/forms';

export interface ValidationResult {
    [key: string]: boolean;
}

export class passwordstrength {

    public static strong(control: FormControl): ValidationResult {
        let hasNumber = /\d/.test(control.value);
        let hasUpper = /[A-Z]/.test(control.value);
        let hasLower = /[a-z]/.test(control.value);
        // console.log('Num, Upp, Low', hasNumber, hasUpper, hasLower);
        const valid = hasNumber && hasUpper && hasLower;
        if (!valid) {
            // return what´s not valid
            return { strong: true };
        }
        return null!;
    }
}

标签： htmlangulartypescriptangular-reactive-forms

解决方案

最简单的解决方案是为您的服务类使用 @Injectable() 装饰器。

@Injectable({
    providedIn: 'root'
})
export class passwordstrength {
    // class definition
}

另一个选项是在模块的 providers 数组中指定它。

@NgModule({
  imports: [
  ],
  declarations: [ ],
  providers: [passwordstrength],
  bootstrap: [ ... ]
})

Angular Style Guide的其他评论：

请使用破折号分隔描述性名称中的单词。请使用常规类型名称，包括 .service、.component、.pipe、.module 和 .directive。

所以，你的“passwordstrength.ts”可以改成“password-strength.service.ts”

同样，“class passwordstrength”可以更改为“class PasswordStrengthService”

推荐阅读