我试图在角度做密码强度

Question

我正在尝试以大写、小写的角度设置密码强度 我得到的控制台中的大小写、数字和特殊字符 错误为。

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!;
    }
}

Answer 1

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

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

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

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

来自Angular Style Guide的其他cmets：

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

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

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