NumberBox - Format doesn't work if the "fa" culture is used

Hi,
I'm trying to localize devextreme number box and text box to Persian Locale.
I successfully have added Globalize + cldr to the angular app.
I'm using the following code for initializing localization:

JavaScript
import {Component} from '@angular/core';  
import Globalize from 'globalize';  

import 'devextreme/localization/globalize/number';  
import 'devextreme/localization/globalize/date';  
import 'devextreme/localization/globalize/currency';  
import 'devextreme/localization/globalize/message';  

import faCldrData from 'devextreme-cldr-data/fa.json';  
import supplementalCldrData from 'devextreme-cldr-data/supplemental.json';  
import config from 'devextreme/core/config';  

@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
  constructor() {  
    Globalize.load(supplementalCldrData, faCldrData);  
    Globalize.locale('fa');  

    config({  
      defaultCurrency: 'IRR'  
    });  
  }  
}  

and the app.component.html is like:

HTML
<dx-number-box format="currency"></dx-number-box>  

so, when I run the application, there is a Number Box in the output with this strange initial value: "ریال ۱۱۱٬۱۱۰". Also the Number Box is read only and can not be edited. The Minus sign also is not working.

Note: "ریال " is Iranian currency symbol and '۱۱۱٬۱۱۰' is equal to '111,110'
------------------------
PS:
I've changed the html template to this:

HTML
<dx-number-box format="#,##0.##"></dx-number-box>  

Now the Number Box is working and I can edit the content, but the Minus sign is still not working.
Project Files has been attached.