特定条件下小数的 Angular 输入验证

Question

如果 itemNew.UL_DATA 和 itemNew.LL_DATA 等于 0 或 ""，如何将输入限制为仅具有 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>

Answer 1

您可以按如下方式实现。

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