InputMask - required not working with placeholder

InputMask - required not working with placeholder

Posted by: marooned on 11 October 2017, 6:44 am EST

• 

  marooned

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 11 October 2017, 6:44 am EST

  Hi there

  I’m using InputMask like this:

  <wj-input-mask require [isRequired]="true" [mask]="'>L'" [(ngModel)]="foo">
  

  and using form.valid to enable/disable submit button.

  The input shows _ as a placeholder. Now, when I enter a character in it, required is fulfilled and submit button became active. Now when I delete that character, _ is shown again BUT input mask assume that _ is the entered character and therefore it’s not empty so required is satisfied and submit is active.

  This is for sure a bug but is there any workaround for this so required is working as it should? I want form to be invalid when I remove data from input with required attribute.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 13 October 2017, 2:36 am EST

  Hi,
  
  We are sorry, we are unable to replicate the issue at our end. For reference, please go with the attached sample.

  Let me know in case the issue persists.

  ~Manish

  InputMask_Required_Valid.zip

• 

  marooned

  • Post Options:
  • Link
    Copy

  Posted 2 November 2017, 7:48 am EST

  Sorry for the long response.
  
  You are using ReactiveFormsModule (model driven forms) while I’m using FormsModule (template driven forms). I’ve changed your example to use TDF and… it’s not working, as I described in the first post.

  See attachment:
  
  InputMask_Required_Valid-fdt.zip

  Any solution to that?
  
  Thanks

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 3 November 2017, 2:15 am EST

  Hi Maroon,
  
  Thanks for the sample for investigation.

  In the control, isRequired property is set to true by default which does not allow to set control value to null or empty. In this case, control set value to “_”. Hence, the control fulfilled the requirement and valid set to true.

  To overcome this problem, you need to set isRequired to false. Please refer to updated code snippet:

   <wj-input-mask id="contact"
                         name="contact"
                         [mask]="'>LLL'"
                         required="true"
                         [(ngModel)]="foo"
                         #cnt
                         placeholder="Enter"
                         [isRequired]="false">
          </wj-input-mask>
  

  ~Manish

• 

  marooned

  • Post Options:
  • Link
    Copy

  Posted 3 November 2017, 7:41 am EST

  So it’s strange that with model driven forms (in your first example) it was working with isRequired=true, but yeah, that solves my issue.

  Thank you for your help. I would suggest updating documentation for this attribute to make it clear what it does.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 6 November 2017, 4:14 am EST

  Hi Maroon,
  
  Thanks for notifying this.
  
  I looked into both sample code and find that in the Reactive form sample, ngModel property is bound to rawValue instead of value by setting wjModelProperty. Hence, this is another approach we found to resolve this issue.

  Hope it clear!

  ~Manish