Form: update phone number format in demos (#32896)

EugeniyKiyashko · web-flow · commit 5c1b5cdd8db3 · 2026-03-13T12:39:58.000+04:00
diff --git a/apps/demos/Demos/Form/Adaptability/Angular/app/app.service.ts b/apps/demos/Demos/Form/Adaptability/Angular/app/app.service.ts
@@ -45,7 +45,7 @@ const employee: Employee = {
   City: 'Los Angeles',
   State: 'CA',
   Zipcode: '90013',
-  Phone: '+1(213) 555-9392',
+  Phone: '(213) 555-9392',
   Email: 'jheart@dx-email.com',
   Skype: 'jheart_DX_skype',
 };
diff --git a/apps/demos/Demos/Form/Adaptability/React/data.ts b/apps/demos/Demos/Form/Adaptability/React/data.ts
@@ -13,7 +13,7 @@ export const employee: Employee = {
   City: 'Los Angeles',
   State: 'CA',
   Zipcode: '90013',
-  Phone: '+1(213) 555-9392',
+  Phone: '(213) 555-9392',
   Email: 'jheart@dx-email.com',
   Skype: 'jheart_DX_skype',
 };
diff --git a/apps/demos/Demos/Form/Adaptability/ReactJs/data.js b/apps/demos/Demos/Form/Adaptability/ReactJs/data.js
@@ -11,7 +11,7 @@ export const employee = {
   City: 'Los Angeles',
   State: 'CA',
   Zipcode: '90013',
-  Phone: '+1(213) 555-9392',
+  Phone: '(213) 555-9392',
   Email: 'jheart@dx-email.com',
   Skype: 'jheart_DX_skype',
 };
diff --git a/apps/demos/Demos/Form/Adaptability/Vue/data.ts b/apps/demos/Demos/Form/Adaptability/Vue/data.ts
@@ -11,7 +11,7 @@ export default {
   City: 'Los Angeles',
   State: 'CA',
   Zipcode: '90013',
-  Phone: '+1(213) 555-9392',
+  Phone: '(213) 555-9392',
   Email: 'jheart@dx-email.com',
   Skype: 'jheart_DX_skype',
 };
diff --git a/apps/demos/Demos/Form/Adaptability/jQuery/data.js b/apps/demos/Demos/Form/Adaptability/jQuery/data.js
@@ -11,7 +11,7 @@ const employee = {
   City: 'Los Angeles',
   State: 'CA',
   Zipcode: '90013',
-  Phone: '+1(213) 555-9392',
+  Phone: '(213) 555-9392',
   Email: 'jheart@dx-email.com',
   Skype: 'jheart_DX_skype',
 };
diff --git a/apps/demos/Demos/Form/Grouping/Angular/app/app.service.ts b/apps/demos/Demos/Form/Grouping/Angular/app/app.service.ts
@@ -45,7 +45,7 @@ const employee: Employee = {
   City: 'Los Angeles',
   State: 'CA',
   Zipcode: '90013',
-  Phone: '+1(213) 555-9392',
+  Phone: '(213) 555-9392',
   Email: 'jheart@dx-email.com',
   Skype: 'jheart_DX_skype',
 };
diff --git a/apps/demos/Demos/Form/Grouping/React/data.ts b/apps/demos/Demos/Form/Grouping/React/data.ts
@@ -13,7 +13,7 @@ export const employee: Employee = {
   City: 'Los Angeles',
   State: 'CA',
   Zipcode: '90013',
-  Phone: '+1(213) 555-9392',
+  Phone: '(213) 555-9392',
   Email: 'jheart@dx-email.com',
   Skype: 'jheart_DX_skype',
 };
diff --git a/apps/demos/Demos/Form/Grouping/ReactJs/data.js b/apps/demos/Demos/Form/Grouping/ReactJs/data.js
@@ -11,7 +11,7 @@ export const employee = {
   City: 'Los Angeles',
   State: 'CA',
   Zipcode: '90013',
-  Phone: '+1(213) 555-9392',
+  Phone: '(213) 555-9392',
   Email: 'jheart@dx-email.com',
   Skype: 'jheart_DX_skype',
 };
diff --git a/apps/demos/Demos/Form/Grouping/Vue/data.ts b/apps/demos/Demos/Form/Grouping/Vue/data.ts
@@ -11,7 +11,7 @@ const employee = {
   City: 'Los Angeles',
   State: 'CA',
   Zipcode: '90013',
-  Phone: '+1(213) 555-9392',
+  Phone: '(213) 555-9392',
   Email: 'jheart@dx-email.com',
   Skype: 'jheart_DX_skype',
 };
diff --git a/apps/demos/Demos/Form/Grouping/jQuery/data.js b/apps/demos/Demos/Form/Grouping/jQuery/data.js
@@ -11,7 +11,7 @@ const employees = {
   City: 'Los Angeles',
   State: 'CA',
   Zipcode: '90013',
-  Phone: '+1(213) 555-9392',
+  Phone: '(213) 555-9392',
   Email: 'jheart@dx-email.com',
   Skype: 'jheart_DX_skype',
 };
diff --git a/apps/demos/Demos/Form/ItemCustomization/Angular/app/app.component.ts b/apps/demos/Demos/Form/ItemCustomization/Angular/app/app.component.ts
@@ -78,7 +78,7 @@ export class AppComponent implements AfterViewInit {
     this.hireDateEditorOptions = { width: '100%', value: null };
     this.birthDateEditorOptions = { width: '100%', disabled: true };
     this.notesEditorOptions = { height: 90, maxLength: 200 };
-    this.phoneEditorOptions = { mask: '+1 (X00) 000-0000', maskRules: { X: /[02-9]/ } };
+    this.phoneEditorOptions = { mask: '(X00) 000-0000', maskRules: { X: /[02-9]/ } };
 
     this.labelTemplates = [
       { name: 'name', icon: 'dx-icon-user' },
diff --git a/apps/demos/Demos/Form/ItemCustomization/React/App.tsx b/apps/demos/Demos/Form/ItemCustomization/React/App.tsx
@@ -35,7 +35,7 @@ const positionEditorOptions: ISelectBoxOptions = { items: positions, searchEnabl
 const hireDateEditorOptions: IDateBoxOptions = { width: '100%', value: null };
 const birthDateEditorOptions: IDateBoxOptions = { width: '100%', disabled: true };
 const notesEditorOptions: ITextAreaOptions = { height: 90, maxLength: 200 };
-const phoneEditorOptions: ITextBoxOptions = { mask: '+1 (X00) 000-0000', maskRules: { X: /[02-9]/ } };
+const phoneEditorOptions: ITextBoxOptions = { mask: '(X00) 000-0000', maskRules: { X: /[02-9]/ } };
 
 const App = () => {
   const validateForm = useCallback((e: FormTypes.ContentReadyEvent): void => {
diff --git a/apps/demos/Demos/Form/ItemCustomization/ReactJs/App.js b/apps/demos/Demos/Form/ItemCustomization/ReactJs/App.js
@@ -16,7 +16,7 @@ const positionEditorOptions = { items: positions, searchEnabled: true, value: ''
 const hireDateEditorOptions = { width: '100%', value: null };
 const birthDateEditorOptions = { width: '100%', disabled: true };
 const notesEditorOptions = { height: 90, maxLength: 200 };
-const phoneEditorOptions = { mask: '+1 (X00) 000-0000', maskRules: { X: /[02-9]/ } };
+const phoneEditorOptions = { mask: '(X00) 000-0000', maskRules: { X: /[02-9]/ } };
 const App = () => {
   const validateForm = useCallback((e) => {
     e.component.validate();
diff --git a/apps/demos/Demos/Form/ItemCustomization/Vue/App.vue b/apps/demos/Demos/Form/ItemCustomization/Vue/App.vue
@@ -141,7 +141,7 @@ const positionEditorOptions = { items: positions, searchEnabled: true, value: ''
 const hireDateEditorOptions = { width: '100%', value: null };
 const birthDateEditorOptions = { width: '100%', disabled: true };
 const notesEditorOptions = { height: 90, maxLength: 200 };
-const phoneEditorOptions = { mask: '+1 (X00) 000-0000', maskRules: { X: /[02-9]/ } };
+const phoneEditorOptions = { mask: '(X00) 000-0000', maskRules: { X: /[02-9]/ } };
 
 function validateForm(e: DxFormTypes.ContentReadyEvent) {
   e.component.validate();
diff --git a/apps/demos/Demos/Form/ItemCustomization/jQuery/index.js b/apps/demos/Demos/Form/ItemCustomization/jQuery/index.js
@@ -94,7 +94,7 @@ $(() => {
       }, {
         dataField: 'Phone',
         editorOptions: {
-          mask: '+1 (X00) 000-0000',
+          mask: '(X00) 000-0000',
           maskRules: { X: /[02-9]/ },
         },
         label: {
diff --git a/apps/demos/Demos/Form/UpdateItemsDynamically/Angular/app/app.component.ts b/apps/demos/Demos/Form/UpdateItemsDynamically/Angular/app/app.component.ts
@@ -60,7 +60,7 @@ export class AppComponent {
 
   generateNewPhoneOptions(index: number): DxTextBoxTypes.Properties {
     return {
-      mask: '+1 (X00) 000-0000',
+      mask: '(X00) 000-0000',
       maskRules: { X: /[01-9]/ },
       buttons: [{
         name: 'trash',
diff --git a/apps/demos/Demos/Form/UpdateItemsDynamically/React/App.tsx b/apps/demos/Demos/Form/UpdateItemsDynamically/React/App.tsx
@@ -27,7 +27,7 @@ const App = () => {
   }), [isHomeAddressVisible]);
 
   const generateNewPhoneOptions = useCallback((index: number): ITextBoxOptions => ({
-    mask: '+1 (X00) 000-0000',
+    mask: '(X00) 000-0000',
     maskRules: { X: /[01-9]/ },
     buttons: [{
       name: 'trash',
diff --git a/apps/demos/Demos/Form/UpdateItemsDynamically/ReactJs/App.js b/apps/demos/Demos/Form/UpdateItemsDynamically/ReactJs/App.js
@@ -21,7 +21,7 @@ const App = () => {
   );
   const generateNewPhoneOptions = useCallback(
     (index) => ({
-      mask: '+1 (X00) 000-0000',
+      mask: '(X00) 000-0000',
       maskRules: { X: /[01-9]/ },
       buttons: [
         {
diff --git a/apps/demos/Demos/Form/UpdateItemsDynamically/Vue/App.vue b/apps/demos/Demos/Form/UpdateItemsDynamically/Vue/App.vue
@@ -95,7 +95,7 @@ function getPhonesOptions(phones: string[]) {
 }
 function generateNewPhoneOptions(index: number) {
   return {
-    mask: '+1 (X00) 000-0000',
+    mask: '(X00) 000-0000',
     maskRules: { X: /[01-9]/ },
     buttons: [{
       name: 'trash',
diff --git a/apps/demos/Demos/Form/UpdateItemsDynamically/jQuery/index.js b/apps/demos/Demos/Form/UpdateItemsDynamically/jQuery/index.js
@@ -77,7 +77,7 @@ $(() => {
         text: `Phone ${index + 1}`,
       },
       editorOptions: {
-        mask: '+1 (X00) 000-0000',
+        mask: '(X00) 000-0000',
         maskRules: { X: /[01-9]/ },
         buttons: [{
           name: 'trash',
diff --git a/apps/demos/Demos/Form/Validation/Angular/app/app.component.ts b/apps/demos/Demos/Form/Validation/Angular/app/app.component.ts
@@ -109,7 +109,7 @@ export class AppComponent {
   };
 
   phoneEditorOptions: EditorOptions = {
-    mask: '+1 (X00) 000-0000',
+    mask: '(X00) 000-0000',
     maskRules: {
       X: /[02-9]/,
     },
diff --git a/apps/demos/Demos/Form/Validation/React/App.tsx b/apps/demos/Demos/Form/Validation/React/App.tsx
@@ -55,7 +55,7 @@ const addressEditorOptions: ITextBoxOptions = {
 };
 
 const phoneEditorOptions: ITextBoxOptions = {
-  mask: '+1 (X00) 000-0000',
+  mask: '(X00) 000-0000',
   valueChangeEvent: 'keyup',
   maskRules: {
     X: /[02-9]/,
diff --git a/apps/demos/Demos/Form/Validation/ReactJs/App.js b/apps/demos/Demos/Form/Validation/ReactJs/App.js
@@ -42,7 +42,7 @@ const addressEditorOptions = {
   valueChangeEvent: 'keyup',
 };
 const phoneEditorOptions = {
-  mask: '+1 (X00) 000-0000',
+  mask: '(X00) 000-0000',
   valueChangeEvent: 'keyup',
   maskRules: {
     X: /[02-9]/,
diff --git a/apps/demos/Demos/Form/Validation/Vue/App.vue b/apps/demos/Demos/Form/Validation/Vue/App.vue
@@ -270,7 +270,7 @@ const checkBoxOptions = ref({
   value: false,
 });
 const phoneEditorOptions = ref({
-  mask: '+1 (X00) 000-0000',
+  mask: '(X00) 000-0000',
   valueChangeEvent: 'keyup',
   maskRules: {
     X: /[02-9]/,
diff --git a/apps/demos/Demos/Form/Validation/jQuery/index.js b/apps/demos/Demos/Form/Validation/jQuery/index.js
@@ -223,7 +223,7 @@ $(() => {
         dataField: 'Phone',
         helpText: 'Enter the phone number in USA phone format',
         editorOptions: {
-          mask: '+1 (X00) 000-0000',
+          mask: '(X00) 000-0000',
           maskRules: {
             X: /[02-9]/,
           },
diff --git a/apps/demos/testing/etalons/Form-Adaptability (fluent.blue.light).png b/apps/demos/testing/etalons/Form-Adaptability (fluent.blue.light).png
diff --git a/apps/demos/testing/etalons/Form-Grouping (fluent.blue.light).png b/apps/demos/testing/etalons/Form-Grouping (fluent.blue.light).png
diff --git a/apps/demos/testing/etalons/Form-ItemCustomization (fluent.blue.light).png b/apps/demos/testing/etalons/Form-ItemCustomization (fluent.blue.light).png
diff --git a/apps/demos/testing/etalons/Form-UpdateItemsDynamically (fluent.blue.light).png b/apps/demos/testing/etalons/Form-UpdateItemsDynamically (fluent.blue.light).png
diff --git a/apps/demos/testing/widgets/form/etalons/form_customize_item_label_tooltip (fluent.blue.light).png b/apps/demos/testing/widgets/form/etalons/form_customize_item_label_tooltip (fluent.blue.light).png
diff --git a/apps/demos/testing/widgets/form/etalons/form_customize_item_label_tooltip (material.blue.light).png b/apps/demos/testing/widgets/form/etalons/form_customize_item_label_tooltip (material.blue.light).png
diff --git a/apps/demos/testing/widgets/form/etalons/form_validation_after_reset (fluent.blue.light).png b/apps/demos/testing/widgets/form/etalons/form_validation_after_reset (fluent.blue.light).png
diff --git a/apps/demos/testing/widgets/form/etalons/form_validation_before_reset (fluent.blue.light).png b/apps/demos/testing/widgets/form/etalons/form_validation_before_reset (fluent.blue.light).png
diff --git a/apps/demos/testing/widgets/form/etalons/form_validation_before_reset (material.blue.light).png b/apps/demos/testing/widgets/form/etalons/form_validation_before_reset (material.blue.light).png
diff --git a/apps/demos/testing/widgets/form/etalons/form_validation_summary (fluent.blue.light).png b/apps/demos/testing/widgets/form/etalons/form_validation_summary (fluent.blue.light).png
