Skip to content

Commit e64b410

Browse files
committed
fix: don't call onchange from writeValue
ngx-cva-test-suite added
1 parent 11d457c commit e64b410

File tree

5 files changed

+62
-9
lines changed

5 files changed

+62
-9
lines changed

bun.lock

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"lockfileVersion": 1,
3+
"configVersion": 0,
34
"workspaces": {
45
"": {
56
"name": "ngx-mask",
@@ -56,6 +57,7 @@
5657
"lint-staged": "16.1.2",
5758
"markdownlint-cli": "0.45.0",
5859
"ng-packagr": "20.1.0",
60+
"ngx-cva-test-suite": "^2.0.1",
5961
"npm-check-updates": "18.0.1",
6062
"postcss": "8.5.6",
6163
"postcss-nesting": "13.0.2",
@@ -2432,6 +2434,8 @@
24322434

24332435
"ng-packagr": ["[email protected]", "", { "dependencies": { "@ampproject/remapping": "^2.3.0", "@rollup/plugin-json": "^6.1.0", "@rollup/wasm-node": "^4.24.0", "ajv": "^8.17.1", "ansi-colors": "^4.1.3", "browserslist": "^4.22.1", "chokidar": "^4.0.1", "commander": "^14.0.0", "dependency-graph": "^1.0.0", "esbuild": "^0.25.0", "find-cache-directory": "^6.0.0", "injection-js": "^2.4.0", "jsonc-parser": "^3.3.1", "less": "^4.2.0", "ora": "^8.2.0", "piscina": "^5.0.0", "postcss": "^8.4.47", "rollup-plugin-dts": "^6.2.0", "rxjs": "^7.8.1", "sass": "^1.81.0", "tinyglobby": "^0.2.12" }, "optionalDependencies": { "rollup": "^4.24.0" }, "peerDependencies": { "@angular/compiler-cli": "^20.0.0 || ^20.1.0-next.0 || ^20.2.0-next.0", "tailwindcss": "^2.0.0 || ^3.0.0 || ^4.0.0", "tslib": "^2.3.0", "typescript": ">=5.8 <5.9" }, "optionalPeers": ["tailwindcss"], "bin": { "ng-packagr": "src/cli/main.js" } }, "sha512-objHk39HWnSSv54KD0Ct4A02rug6HiqbmXo1KJW39npzuVc37QWfiZy94afltH1zIx+mQqollmGaCmwibmagvQ=="],
24342436

2437+
"ngx-cva-test-suite": ["[email protected]", "", { "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/core": ">=12.0.0", "@angular/forms": ">=12.0.0", "@angular/platform-browser": ">=12.0.0" } }, "sha512-Q6JrUVFXq1J4AdxOoD6KMO4vTZei+l8GYQdlWbT2vExUNu7KW6bulqXsl+OBNHiQ6tj3BKS/+K42HEOuaSfNWg=="],
2438+
24352439
"ngx-highlightjs": ["[email protected]", "", { "dependencies": { "highlight.js": "^11.11.1", "tslib": "^2.3.0" }, "peerDependencies": { "@angular/cdk": ">=19.0.0", "@angular/common": ">=19.0.0", "@angular/core": ">=19.0.0", "rxjs": ">=7.0.0" } }, "sha512-pa4YPChIho+Qs6P036oMvTt8pmTlMwberz/kGBojKVMEHSj9t4PT1YzBplM+RMK0VWgLK4zRbJbxivQrLPr1fQ=="],
24362440

24372441
"ngxtension": ["[email protected]", "", { "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/common": ">=16.0.0", "@angular/core": ">=16.0.0", "@use-gesture/vanilla": "^10.0.0", "rxjs": "^6.0.0 || ^7.0.0" }, "optionalPeers": ["@use-gesture/vanilla"] }, "sha512-ZYs5Fkgrcu+aa/GBqIf/2N7SUZoYam+Fjmu7WxP9rIm4Mx0SECzq+glpWDwBYyPtyfCBwuo6Z8dSPyyzR7PTFQ=="],

package.json

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,10 @@
9999
"@typescript-eslint/parser": "8.38.0",
100100
"@web/test-runner": "0.20.2",
101101
"angular-cli-ghpages": "2.0.3",
102+
"angular-eslint": "20.1.1",
102103
"angular-http-server": "1.12.0",
104+
"bun-types": "1.2.19",
105+
"cssnano": "7.1.0",
103106
"eslint": "9.31.0",
104107
"eslint-config-prettier": "10.1.8",
105108
"eslint-plugin-json": "4.0.1",
@@ -109,23 +112,21 @@
109112
"lint-staged": "16.1.2",
110113
"markdownlint-cli": "0.45.0",
111114
"ng-packagr": "20.1.0",
115+
"ngx-cva-test-suite": "^2.0.1",
112116
"npm-check-updates": "18.0.1",
117+
"postcss": "8.5.6",
118+
"postcss-nesting": "13.0.2",
119+
"postcss-scss": "4.0.9",
113120
"prettier": "3.6.2",
114121
"puppeteer": "24.14.0",
115122
"stylelint": "16.22.0",
116123
"stylelint-config-prettier": "9.0.5",
117124
"stylelint-config-recommended-scss": "15.0.1",
118125
"stylelint-prettier": "5.0.3",
126+
"tailwindcss": "3.4.16",
119127
"type-coverage": "2.29.7",
120128
"typescript": "5.8.3",
121-
"angular-eslint": "20.1.1",
122-
"typescript-eslint": "8.38.0",
123-
"tailwindcss": "3.4.16",
124-
"bun-types": "1.2.19",
125-
"postcss": "8.5.6",
126-
"postcss-nesting": "13.0.2",
127-
"cssnano": "7.1.0",
128-
"postcss-scss": "4.0.9"
129+
"typescript-eslint": "8.38.0"
129130
},
130131
"typeCoverage": {
131132
"atLeast": 91,

projects/ngx-mask-lib/src/lib/ngx-mask.service.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -595,6 +595,11 @@ export class NgxMaskService extends NgxMaskApplierService {
595595
? this.outputTransformFn
596596
: (v: unknown) => v;
597597

598+
// don't fire onchange from writevalue
599+
if (this.writingValue && this.maskChanged == false) {
600+
return;
601+
}
602+
598603
this.writingValue = false;
599604
this.maskChanged = false;
600605

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
2+
import { runValueAccessorTests } from 'ngx-cva-test-suite';
3+
import type { ElementRef} from '@angular/core';
4+
import { Component, ViewChild } from '@angular/core';
5+
import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
6+
7+
@Component({
8+
template: `<input
9+
mask="Hh:m0"
10+
[dropSpecialCharacters]="false"
11+
[showMaskTyped]="true"
12+
[leadZeroDateTime]="true"
13+
#ctrl />`,
14+
imports: [NgxMaskDirective],
15+
})
16+
export class CVAWrapperComponent {
17+
@ViewChild(NgxMaskDirective) public defaultCtrl!: NgxMaskDirective;
18+
@ViewChild('ctrl') public readonly ctrl!: ElementRef<HTMLInputElement>;
19+
20+
public get value(): string {
21+
return this.ctrl?.nativeElement.value;
22+
}
23+
}
24+
25+
describe('TimeFieldFormComponent', () => {
26+
runValueAccessorTests<NgxMaskDirective, CVAWrapperComponent>({
27+
component: NgxMaskDirective,
28+
testModuleMetadata: {
29+
providers: [provideNgxMask()],
30+
imports: [FormsModule, ReactiveFormsModule],
31+
},
32+
hostTemplate: {
33+
hostComponent: CVAWrapperComponent,
34+
getTestingComponent: fixture => fixture.componentInstance.defaultCtrl,
35+
},
36+
supportsOnBlur: true,
37+
nativeControlSelector: 'input[mask]',
38+
internalValueChangeSetter: null,
39+
getComponentValue: null,
40+
resetCustomValue: { value: '__:__' },
41+
getValues: () => ['10:00', '20:00', null],
42+
});
43+
});

projects/ngx-mask-lib/src/test/type-number.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { equal } from './utils/test-functions.component';
1111
imports: [ReactiveFormsModule, NgxMaskDirective],
1212
template: ` <input id="maska" type="number" [mask]="mask()" [formControl]="form" /> `,
1313
})
14-
// eslint-disable-next-line @angular-eslint/component-class-suffix
14+
1515
export class TestTypeNumber {
1616
public form: FormControl = new FormControl('');
1717
public mask = signal<string>('');

0 commit comments

Comments
 (0)