*Expected behavior*So whenever I lookup how to restrict character entry in a field, most search results return solutions for input type, I need a way to restrict character entry from a field that calls for info in a databinding span and I have an enable editing feature already implemented/working, I just need a way to restrict characters such as dates only accept numerals or backslashes'/' and for fields like Location to only accept letter and certain punctuation -,',&.

*Resources (screenshots, code snippets etc.)*The HTML portion:

          <td>
              <span [attr.contenteditable]="Editmode"  (keyup)="changeValue(el.id, 'name', $event)" >{{j.title}}</span>
          </td>
          <td>
              <span [attr.contenteditable]="Editmode" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'date', $event)" >{{j.date | date: 'shortDate'}}</span>
          </td>
          <td>
              <span [attr.contenteditable]="Editmode" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'location', $event)" >{{j.location}}</span>
          </td>
          <td>
              <span [attr.contenteditable]="Editmode" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'status', $event)" >{{j.status}}</span>
          </td>
          <td>
              <span [attr.contenteditable]="Editmode" (keydown.enter)="onKeydown($event)" (keyup)="changeNumber(el.id, 'opens', $event)" >{{j.openings}}</span>
          </td>
          <td>
              <span [attr.contenteditable]="Editmode" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'duration', $event)" >{{j.duration}}</span>
          </td> 

Associated typescript:

export class TableviewComponent implements OnInit, AfterViewInit { Editmode= false;


onKeydown(event){
    event.preventDefault();
  }
changeValue(id: number, property: string, event: any) {
    this.editField = event.target.textContent;
  }

_keyUp(id: number, event: any) {
    const pattern = /[0-9\+\-\ ]/;
    let inputChar = String.fromCharCode(event.charCode);

    if (!pattern.test(inputChar)) {
      // invalid character, prevent input
      event.preventDefault();
    }
    if(id > this.personList.length){
      event.preventDefault();
      id= this.personList.length;
      return id;
    }
}
}