Валидатор пустого / пустого пространства не возвращает сообщение. [Угловое] - PullRequest
Новая
       20

Валидатор пустого / пустого пространства не возвращает сообщение. [Угловое]

0 голосов
/ 05 июня 2019

В угловом коде используются реактивные формы. Там было написано в отдельном файле

noWhiteSpaceValidator , который впоследствии был включен в форму formControl в .ts файле и .html файле

Вот код валидатора: 

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

export function noWhiteSpaceValidator(control: FormControl) {
  if (control.value === null || control.value === '') {
    return null;
  }
  const isWhitespace = control.value.trim().length === 0;
  const isValid = !isWhitespace;
  return isValid ? null : { whitespace: true };
}

часть файла .ts: 

import { FormGroup, FormControl, Validators, AbstractControl } from '@angular/forms';
import { noWhiteSpaceValidator} from '...';

export class UserProfileFormComponent implements OnInit {
  user: User;
  private userProfileForm: FormGroup;
  private firstNameFormControl = new FormControl('', [Validators.required, noWhiteSpaceValidator]);
  private lastNameFormControl = new FormControl('', [Validators.required, noWhiteSpaceValidator]);

ngOnInit() {
    this.userProfileForm = new FormGroup({
      first_name: this.firstNameFormControl,
      last_name: this.lastNameFormControl,

и часть файла .html: 

<form [formGroup]="userProfileForm">
...
<div class="form-group">
   <label for="id">{{ 'userProfile.firstName' | translate }}</label>
   <input type="text" class="form-control" [minLength]="2 
       [maxLength]="100" formControlName="first_name"
       required noWhiteSpaceValidator>
   <div *ngIf="firstNameFormControl.errors">
       <div *ngIf="firstNameFormControl.errors.required">
           {{ 'errors.requiredField' | translate }}
       </div>
   <div *ngIf="firstNameFormControl.errors.noWhiteSpaceValidator">
           {{ 'errors.noWhiteSpace' | translate }}
   </div>
   </div>           
....
</form>

Сообщение Validator.required отображается нормально. Тем не менее, затем я удаляю Validator.required , сообщение noWhiteSpaceValidator не появится.

1 Ответ

0 голосов
/ 05 июня 2019

Ниже приведен фрагмент моего кода 

  public loginForm: FormGroup;

  constructor(
    private formBuilder: FormBuilder
  ) {}

  get UserName() {
    return this.loginForm.get("UserName");
  }

  ngOnInit() {
    this.buildForm();
  }

  private buildForm() {
    this.loginForm = this.formBuilder.group({
      UserName: ["", Validators.required, this.noWhitespaceValidator]
    });
  }

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

Тогда в моем компоненте 

<div *ngIf="UserName.errors.whitespace">
  you have a whitespace
</div>
...