不允许 Angular 表单中的 WhiteSpace

Question

我在 Angular Form register image中实现注册用户，它之前已经验证了 maxlength 和 minlength。 现在，我添加了一个验证来检查输入密码是否有空格。

 const form = new FormGroup<UserRegister>({ email: new FormControl<string>(email, [ Validators.required, Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[az]{2,4}$') ]), password: new FormControl<string>(password, [ Validators.required, Validators.minLength(PASSWORD_MINLENGTH), Validators.maxLength(PASSWORD_MAXLENGTH), ]), confirmPassword: new FormControl<string>(confirmPassword, [ Validators.required ]), }, {validators: [isWhiteSpace, passwordMatchValidator]});

 <input matInput type="password" required formControlName="password" [errorStateMatcher]="errorStateMatcher" placeholder="{{ 'password' | translate }}"> <mat-error *ngIf="form.hasError('required', ['password'])" [translate]="'validation.required'" [translateParams]="{ value: 'password' | translate }"></mat-error> <mat-error *ngIf="form.hasError('isWhiteSpace', ['password'])" [translate]="'validation.isWhiteSpace'" [translateParams]="{ value: 'password' | translate }"></mat-error> <mat-error *ngIf="form.hasError('minlength', ['password'])" [translate]="'validation.minLength'" [translateParams]="{ value: 'password' | translate, minLength: PASSWORD_MINLENGTH }"></mat-error> <mat-error *ngIf="form.hasError('maxlength', ['password'])" [translate]="'validation.maxLength'" [translateParams]="{ value: 'password' | translate, maxLength: PASSWORD_MAXLENGTH }"></mat-error>

但是当我将 function isWhiteSpace 添加到表单时，最小-最大长度的验证未激活。 当我输入一个字符串 < minlength 并且有空格但它只显示一个关于空格的错误时，我的预期结果是显示关于 minlength 和空格的 2 个错误。 有人可以给我一个解决方案吗？

Answer 1

你可以这样做

ngOnInit() {
        this.userForm = this.fb.group({
            username: ["", noWhitespaceValidator]
        });
    }

noWhitespaceValidator(control: FormControl) {
    const isWhitespace = (control.value || "").trim().length === 0;
    const isValid = !isWhitespace;
    return of(isValid ? null : { whitespace: true });
}

然后在您看来只需使用

*ngIf="userForm.get('username').hasError('whitespace')"