I am working on a project using angular and my task is to create a input for typing price of flight. so this is the description:

• the input must only accept numbers from 0 to 9, comma and dot and have maximum 2 decimal places

• when input is larger than 1000 and then automatically add commas to divisible by 3 index, ex: 1222344546.01 -> 1,222,344,546.01

• example:

  • 000123456.1 -> 123,456.1 -> valid
  • 12344546.01 -> 12,344,546.01 -> valid
  • 0 -> valid
  • 00000.1 -> 0.1 -> valid
  • 00.01 -> 0.01 -> valid
  • .01 -> 0.01 -> valid
  • .001 -> 0.001 -> invalid
  • 000.001 -> 0.001 -> invalid
  • ,01 -> invalid
  • 1231321,1231 -> invalid

I did try with ngModelChange and replace text a little bit with method filterContent but the text still not change anything:

example.component.html

  <form>
    <input type="text" matInput [(ngModel)]="content" name="content" (ngModelChange)="filterContent($event)" />
  </form>

example.component.ts

import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { DialogData } from 'src/app/model/dialog-data';

@Component({
  selector: 'app-example-dialog',
  templateUrl: './example-dialog.component.html',
  styleUrls: ['./example-dialog.component.scss']
})

export class ExampleDialogComponent implements OnInit {
  content: string = '';

  constructor(
    public dialogRef: MatDialogRef<ExampleDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) { }

  ngOnInit() {
  }

  onNoClick(): void {
    this.dialogRef.close();
  }

  filterContent($event: string) {
    const replaceText = $event.replace('a', '');
    this.content = replaceText
  }
}

package.json

{
  "name": "mock-internal-ui",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.2.16",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "^7.2.16",
    "@angular/compiler": "^7.2.16",
    "@angular/core": "^7.2.16",
    "@angular/forms": "^7.2.16",
    "@angular/http": "^7.2.16",
    "@angular/material": "^7.3.7",
    "@angular/material-moment-adapter": "^12.2.5",
    "@angular/platform-browser": "^7.2.16",
    "@angular/platform-browser-dynamic": "^7.2.16",
    "@angular/router": "^7.2.16",
    "@azure/msal-angular": "^0.1.4",
    "@iplab/ngx-file-upload": "^2.0.9",
    "@ng-bootstrap/ng-bootstrap": "^4.2.2",
    "@types/bootstrap": "^4.6.1",
    "@types/jquery": "^3.5.6",
    "axios": "^0.21.4",
    "bootstrap": "^4.6.0",
    "core-js": "^2.6.12",
    "file-saver": "^2.0.5",
    "flatpickr": "^4.6.9",
    "hammerjs": "^2.0.8",
    "jquery": "^3.6.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "ng-zorro-antd": "^7.5.1",
    "ngx-bootstrap": "^3.3.0",
    "nprogress": "^0.2.0",
    "rxjs": "6.3.3",
    "rxjs-compat": "6.3.3",
    "uuid": "^8.3.1",
    "xlsx": "^0.17.1",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.10",
    "@angular/cli": "^7.3.10",
    "@angular/compiler-cli": "^7.2.16",
    "@angular/language-service": "^7.2.16",
    "@types/jasmine": "^2.8.18",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "~8.9.4",
    "@types/uuid": "^8.3.0",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.6",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.4.4",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  },
  "prettier": {
    "singleQuote": true,
    "trailingComma": "all"
  }
}

thank for your time and help, it does mean a lot to me. Once again, thank you and have a good day

CodePudding user response：

Instead of (ngModelChange), use (input) - that will trigger the update

CodePudding user response：

If you are using double way binding, it may cause the content is not updating with ngModelChange. Try to use single way binding, in input tag:

[ngModel]="name" (ngModelChange)="filterContent($event)"

or

[value]="name" (input)="filterContent($event)"