我正在尝试 angular 中的密码强度

Question

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

NullInjectorError: No provider for password strength! in passwordstrength.ts file

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]
            });
          }

密码strength.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() 装饰器class。

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

另一种选择是在模块的提供程序数组中指定它。

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

来自Angular Style Guide的其他评论：

Do use dashes to separate words in the descriptive name. Do use conventional type names including .service, .component, .pipe, .module, and .directive.

因此，您的“密码strength.ts”可以更改为“密码-strength.service.ts”

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

我正在尝试 angular 中的密码强度

im trying to do password strength in angular

html

typescript

angular

angular-reactive-forms