3

How to restrict input to numbers only with 2 decimal places if itemNew.UL_DATA and itemNew.LL_DATA equals to 0 or "".

<ion-col col-2>     
    <input (keypress)="ShowKey();" 
           [style.display]="itemNew.UL_DATA=='0' && itemNew.LL_DATA=='0'?'none':'inherit'"   
           style="width: 100%;flex-grow: 1; align-self:  flex-end;" 
           type="text" placeholder="Actual After Value" 
           [(ngModel)]="itemNew.ACTUAL_VALUE_L" 
           name="ActualData" 
           id="ActualData">

</ion-col>
2
  • <ion-col col-2> <input (keypress)="ShowKey();" [style.display]="itemNew.UL_DATA=='0' && itemNew.LL_DATA=='0' ?'none':'inherit'" style="width: 100%;flex-grow: 1; align-self: flex-end;" type="text" placeholder="Actual After Value" [(ngModel)]="itemNew.ACTUAL_VALUE_L" name="ActualData" id="ActualData"> </ion-col>
    – JL_Coder
    Commented Jul 3, 2019 at 2:51
  • Please edit that into your question instead of putting it as a comment. Also, it looks like that is just a code snippet and not an MCVE. There is no specific roadblocks or error message either
    – Andreas
    Commented Jul 3, 2019 at 2:53

1 Answer 1

12

You can achieve it as follows.

HTML

<form [formGroup]="myForm">
  <ion-col>     
    <input #num formControlName="number" />
    <span style="color:red" *ngIf="(
          myForm.get('number').hasError('pattern') &&
          myForm.get('number').touched)">Invalid input.</span>
  </ion-col>
</form>

TS

  myForm: FormGroup;
  numRegex = /^-?\d*[.,]?\d{0,2}$/;

  constructor() {
    this.myForm = new FormGroup({
      number: new FormControl('', [Validators.required, Validators.pattern(this.numRegex)])
    });
  }

StackBlitz Demo

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.