Когда поле ввода было очищено путем удаления введенных специальных символов, как отобразить требуемую ошибку при вводе в angular 6 - PullRequest
Новая
       28

Когда поле ввода было очищено путем удаления введенных специальных символов, как отобразить требуемую ошибку при вводе в angular 6

0 голосов
/ 07 апреля 2020

Мы используем пользовательскую директиву, чтобы запретить специальные символы, введенные в поле ввода. Но когда поле ввода становится пустым при удалении специальных символов, оно не отображает требуемое сообщение об ошибке, поскольку поле находится в допустимом состоянии.

Как показать сообщение об ошибке, когда поле было очищено, а символы удалены. 

import { Directive, ElementRef, HostListener, Input,ViewChild } from '@angular/core';
import { NgControl } from '@angular/forms';
@Directive({
  selector: 'input[nospecialchars]'
})
export class NospecialcharsDirective {
  constructor(private _el: ElementRef,private control: NgControl) { }
  @HostListener('input', ['$event.target']) onEvent(target: HTMLInputElement) {

      var initalValue = this._el.nativeElement.value;
      this._el.nativeElement.value = initalValue.replace(/[^a-zA-Z\s]/g, "");
      initalValue = this._el.nativeElement.value;
      if(this._el.nativeElement.value.trim().length === 0){
        this._el.nativeElement.value = initalValue.toString().replace(/\ /g, '');
      }
      if (initalValue !== this._el.nativeElement.value || this._el.nativeElement.value.trim().length === 0) {
        //event.stopPropagation();
        this.control.viewToModelUpdate((target.value === '') ? '' : target.value);

        return false;
      }
  }
}

html

    <div class='field-container'>
      <input type="text" value="" size="25" maxlength="30" class="input-field" placeholder=" "  name="firstname" required #first_name="ngModel" [(ngModel)]="memberreqobj.user.first_name" class="floating-input" nospecialchars autocomplete="off" />
      <label>first name</label>
      <div *ngIf="(enrollmentform.submitted || first_name.dirty || first_name.touched) && first_name.invalid" class="error">
      <div class="error-message" *ngIf="first_name.errors.required">First_Name_is_required</div>
     </div>
    </div>
...