Не разрешать WhiteSpace в угловой форме

Question

Я осуществляю регистрацию пользователя в Angular Форма регистра изображения , она уже проверила maxlength и minlength. И теперь, я добавляю проверку, чтобы проверить, что у ввода пароля есть пробел.

const form = new FormGroup<UserRegister>({
      email: new FormControl<string>(email, [
        Validators.required,
        Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{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>

Но когда я добавляю функцию isWhiteSpace в форму, проверка минимальной и максимальной длины неактивна. Когда я ввожу строку

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')"