Input/InputMask and events on bad input

Input/InputMask and events on bad input

Posted by: jbasilio on 19 June 2018, 11:40 pm EST

• 

  jbasilio

  • Post Options:
  • Link
    Copy

  Posted 19 June 2018, 11:40 pm EST

  Hi:

  On your demo page:
  
  http://demos.wijmo.com/5/angular/inputintro/inputintro/

  On the ‘InputMask’ section it demonstrates the ability to put a mask on the input for time. If my user types a time outside of the mask (ex. 04:99 AM), when the user leaves the field the input snaps back to what was prior to the user typing.

  Are there any events to catch this in order to inform the user of their error?

  Thanks.
  
  Jim

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 20 June 2018, 10:52 pm EST

  Hi,
  
  You can handle the lostFocus and keydown event to achieve the required functionality.

  To check if the user entered a valid value or not you may compare _oldText with the text property.
  
  Please refer to following code snippet

  <wj-input-time #it
  	[format]="'hh:mm tt'"
  	[isEditable]="true"
  	[step]="15"
  	[mask]="'00:00 >LL'"
  	[title]="'Mask: 00:00 >LL'"
  	(initialized)="init(it)">
  </wj-input-time>
  
  /* equivalent init method
  init(iTime){
  /* some initialization work */
  	iTime.lostFocus.addHandler(()=>{
  		this._compareText(iTime);
  	});
  
  	iTime.hostElement.addEventListener('keydown',(e)=>{
  		if(e.keyCode==wjcCore.Key.Enter){
  			this._compareText(iTime);
  		}
  	});
  }
  
  _compareText(inputTime){
  	var oldText=inputTime._oldText;
  	var curText=inputTime.text;
  	if(oldText!=curText){
  		/* user entered invalid value */
  		console.log('invalid',oldText);
  		this.msg="invalid value :- "+oldText;
  		inputTime._oldText=curText;
  	}else{
  		this.msg=null;
  	}
  }
  

  You can also refer to the following sample:- https://stackblitz.com/edit/angular-kx31bt?file=app%2Fapp.component.ts

• 

  jbasilio

  • Post Options:
  • Link
    Copy

  Posted 20 June 2018, 11:55 pm EST

  Thank you Manish. Will give this a try.