CODEWITHSUNDEEP
angularionic-framework
JL_Coder
JL_Coder

Reputation: 164

Angular input validation for decimals on certain conditions

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>

Upvotes: 3

Views: 16603

Answers (1)

Sudarshana Dayananda
Sudarshana Dayananda

Reputation: 5265

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

Upvotes: 12

Related Questions