WEB-614 Fix dateValue formatting in configuration edit by Anshudh · Pull Request #3076 · openMF/web-app

Anshudh · 2026-02-02T13:14:15Z

When adding a configuration for custom account number length, the system shows a warning about the date format being sent with an incorrect value. The date picker was sending dates in ISO format (2026-01-21T06:00:00.000Z) but the backend expected them formatted according to the dateFormat setting.

Changes:

Added DatePipe to format dates according to the user's dateFormat setting
Date values are now formatted as strings (e.g., '21 January 2026') before sending to backend
Includes locale and dateFormat in the payload for proper backend processing

Description

https://mifosforge.jira.com/browse/WEB-614

Related issues and discussion

This issue was already present and assigned to me for resolution.

#WEB-614

Screenshots

Before

After

Summary by CodeRabbit

Bug Fixes
- Date fields now respect your chosen language and date format (with a sensible default), ensuring consistent display and submission.
- Invalid, empty, or unparsable date values are omitted from payloads so bad data is not sent.
- After saving configuration changes, the app reliably returns you to the previous screen.

coderabbitai · 2026-02-02T13:14:33Z

Note

`.coderabbit.yaml` has unrecognized properties

CodeRabbit is using all valid settings from your configuration. Unrecognized properties (listed below) have been ignored and may indicate typos or deprecated fields that can be removed.

⚠️ Parsing warnings (1)

Validation error: Unrecognized key(s) in object: 'pre_merge_checks'

⚙️ Configuration instructions

Please see the configuration documentation for more information.
You can also validate your configuration using the online YAML validator.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Walkthrough

EditConfigurationComponent now injects the Dates utility as dateUtils and formats submitted dateValue using settingsService.dateFormat (fallback dd MMMM yyyy) and the current language; when formatting succeeds, payload.locale and payload.dateFormat are set. Empty stringValue removal and deletion of absent dateValue remain. On backend response the code navigates back without using the response.

Changes

Cohort / File(s)	Summary
Date formatting in edit configuration `src/app/system/configurations/global-configurations-tab/edit-configuration/edit-configuration.component.ts`	Injects `Dates` as `dateUtils`; computes `dateFormat` from `settingsService.dateFormat` with fallback `'dd MMMM yyyy'`; formats `dateValue` via `dateUtils.formatDate` using current language; sets `payload.locale` and `payload.dateFormat` when formatting succeeds; removes `dateValue` from payload if formatting fails; preserves removal of empty `stringValue` and deletion of absent `dateValue`; backend subscription now only triggers navigation.

Sequence Diagram(s)

(omitted)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

Fix: Unable to create Savings Account with Charges (Date Format Mismatch) #3055 — also adds dateUtils.formatDate usage to component payloads to convert Date objects into formatted strings before API submission.
WEB-389: Fix date format issue when editing holidays #2741 — modifies client-side date formatting before submitting forms using Dates/dateUtils and sets formatted date strings with locale/format in payloads.

Suggested reviewers

IOhacker
alberto-art3ch

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'WEB-614 Fix dateValue formatting in configuration edit' directly and clearly describes the main change: fixing how date values are formatted when editing configurations.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Important

Action Needed: IP Allowlist Update

If your organization protects your Git platform with IP whitelisting, please add the new CodeRabbit IP address to your allowlist:

✨ 136.113.208.247/32 (new)
34.170.211.100/32
35.222.179.152/32

Failure to add the new IP will result in interrupted reviews.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Copilot

Pull request overview

This PR fixes a date formatting issue in the configuration edit functionality where the system was sending dates in ISO format (e.g., 2026-01-21T06:00:00.000Z) instead of the expected formatted string according to the user's dateFormat setting (e.g., 21 January 2026). The fix adds date formatting using Angular's DatePipe to transform dates before sending them to the backend.

Changes:

Added DatePipe import and injection to format dates according to user's dateFormat setting
Modified the submit method to format dateValue using DatePipe before including it in the API payload
Ensured locale and dateFormat are included in the payload for proper backend processing

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-02T13:17:21Z

.../configurations/global-configurations-tab/edit-configuration/edit-configuration.component.ts

+        payload.dateValue = this.datePipe.transform(
+          this.configurationForm.value.dateValue,
+          dateFormat,
+          undefined,
+          this.settingsService.language.code
+        );


The datePipe.transform() method can return null if the date value is invalid or if the format is incorrect. This null value should be handled before assigning to payload.dateValue. Consider adding a null check or using optional chaining to prevent potential issues when the transformation fails.

Copilot · 2026-02-02T13:17:22Z

.../configurations/global-configurations-tab/edit-configuration/edit-configuration.component.ts

+        payload.dateValue = this.datePipe.transform(
+          this.configurationForm.value.dateValue,
+          dateFormat,
+          undefined,
+          this.settingsService.language.code
+        );


The codebase convention is to use the Dates service's formatDate() method for date formatting in API payloads rather than using DatePipe directly. For example, see how it's used in src/app/clients/clients-view/client-actions/activate-client/activate-client.component.ts:90, src/app/loans/loans-view/loan-account-actions/approve-loan/approve-loan.component.ts:126, and hundreds of other similar cases throughout the codebase. Consider using dateUtils.formatDate() instead to maintain consistency with the established pattern in the codebase.

coderabbitai

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/app/system/configurations/global-configurations-tab/edit-configuration/edit-configuration.component.ts (1)
14-39: ⚠️ Potential issue | 🔴 Critical

Add DatePipe to the component's providers array.

The DatePipe cannot be injected in this standalone component without explicit provision. Although CommonModule is available via STANDALONE_SHARED_IMPORTS, it does not provide DatePipe for dependency injection. Add it to the component's providers to resolve the runtime injector error.
Suggested fix
 `@Component`({
   selector: 'mifosx-edit-configuration',
   templateUrl: './edit-configuration.component.html',
   styleUrls: ['./edit-configuration.component.scss'],
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
     CdkTextareaAutosize
-  ]
+  ],
+  providers: [DatePipe]
 })

🤖 Fix all issues with AI agents

In
`@src/app/system/configurations/global-configurations-tab/edit-configuration/edit-configuration.component.ts`:
- Around line 105-115: The code assigns payload.dateValue directly from
DatePipe.transform which can return null; modify the block in
edit-configuration.component.ts (around configurationForm.value.dateValue
handling) to call this.datePipe.transform(...), check the result is not null
before setting payload.dateValue (and only then set payload.locale and
payload.dateFormat), and if the transform returns null avoid setting
dateValue/locale/dateFormat or handle the invalid date case (e.g., set an error
or skip these payload fields) so the backend never receives a null dateValue.

.../configurations/global-configurations-tab/edit-configuration/edit-configuration.component.ts

Copilot

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

alberto-art3ch

Please see the comment and consider to have only one commit in the Pull Request. So squash your commits

alberto-art3ch · 2026-02-02T14:17:49Z

.../configurations/global-configurations-tab/edit-configuration/edit-configuration.component.ts

-        payload.locale = this.settingsService.language.code;
-        payload.dateFormat = this.settingsService.dateFormat;
+        // Format the date according to the dateFormat setting
+        const dateFormat = this.settingsService.dateFormat || 'dd MMMM yyyy';


There is a service class to get this format:

dateUtils.formatDate
That method receives the date value to be formatted and the format to be used that usually comes from the user settings

Thanks for the suggestion. I’ve updated the implementation to use dateUtils.formatDate for date formatting, ensuring consistency with user settings, and kept the necessary guards to avoid sending invalid dates to the backend.

I’ve also squashed the commits so the Pull Request now contains a single commit as requested. Please have a look.

… to backend When adding a configuration for custom account number length, the system shows a warning about the date format being sent with an incorrect value. The date picker was sending dates in ISO format but the backend expected them formatted according to the dateFormat setting. Changes: - Import and use Dates.formatDate service for consistent date formatting - Format dates according to the user's dateFormat setting before sending to backend - Date values are now formatted as strings matching the dateFormat pattern - Includes locale and dateFormat in the payload for proper backend processing

Copilot AI review requested due to automatic review settings February 2, 2026 13:14

Copilot started reviewing on behalf of Anshudh February 2, 2026 13:14 View session

Copilot AI reviewed Feb 2, 2026

View reviewed changes

coderabbitai bot reviewed Feb 2, 2026

View reviewed changes

.../configurations/global-configurations-tab/edit-configuration/edit-configuration.component.ts Outdated Show resolved Hide resolved

Anshudh requested a review from Copilot February 2, 2026 13:58

Copilot started reviewing on behalf of Anshudh February 2, 2026 13:59 View session

Copilot AI reviewed Feb 2, 2026

View reviewed changes

alberto-art3ch requested changes Feb 2, 2026

View reviewed changes

Anshudh force-pushed the WEB-614-fix-config-date-validation branch from 7598249 to 84ca84e Compare February 3, 2026 10:38

Anshudh requested a review from alberto-art3ch February 3, 2026 10:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WEB-614 Fix dateValue formatting in configuration edit#3076

WEB-614 Fix dateValue formatting in configuration edit#3076
Anshudh wants to merge 1 commit intoopenMF:devfrom
Anshudh:WEB-614-fix-config-date-validation

Anshudh commented Feb 2, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Feb 2, 2026 •

edited

Loading

`.coderabbit.yaml` has unrecognized properties

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 2, 2026

Uh oh!

Copilot AI Feb 2, 2026

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

alberto-art3ch left a comment

Uh oh!

alberto-art3ch Feb 2, 2026

Uh oh!

Anshudh Feb 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Anshudh commented Feb 2, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issues and discussion

Screenshots

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

.coderabbit.yaml has unrecognized properties

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested reviewers

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

alberto-art3ch left a comment

Choose a reason for hiding this comment

Uh oh!

alberto-art3ch Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

Anshudh Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Anshudh commented Feb 2, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Feb 2, 2026 •

edited

Loading

`.coderabbit.yaml` has unrecognized properties