0

I'm working on an Angular reactive form, which contains an input field that should allow only a decimal separator that matches with the local decimal separator.

For example, if locale == en, it should allow only a dot as separator. If locale == pt however, it should allow only a comma. In order to know what locale should be allowed, I have the user's language available. Please notice that, regardless of the used separator, the value should be converted to standard English dot before saving it.

Firstly I tried to map the keyboard input using the (keyup) event. But, while testing it I got a KeyboardEvent.key == 229 ("Unidentified") as a result, which wouldn't work for what I expected.

Then I moved to the next option, which would be mapping the input value to find whether it had a decimal separator or not. Sadly, it didn't work for both cases I tried. For the first one, I got the message Property ‘formatToParts’ does not exist on type ‘NumberFormat’ and for the second one just didn't bring the separator as I expected.

As I am running out of options, I thought of asking it here: is there a way to find out what decimal operator is used, based on the locale? How could I avoid a non-allowed character being typed and, for example, remove it right away? I hope someone can help me with that.

Thank you!

form.html

<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <ion-list class="contact-box" padding>
        <ion-item>
            <ion-label stacked>Total Area: 
                <span class="required-mark">*</span>
            </ion-label>
            <ion-input type="number" formControlName="total_area" min="0" (ionChange)="handleLocaleDecimalSeparator($event)"></ion-input>
        </ion-item>
    </ion-list>
    <ion-list padding>
        <button ion-button type="submit" class="btn-rounded-full" [disabled]="!form.valid">Save</button>
    </ion-list>
</form>

form.ts

export class EditFarmPage {
  form: FormGroup;
  property: any = {};
  user: any = {
   name: string = 'José',
   language: string = 'es'
  }

  constructor(private fb: FormBuilder) {
     this.form = this.fb.group({
      total_area: [this.property.totalarea, Validators.compose([Validators.required, Validators.pattern(ValidatorService.onlyNumbersValidator())])],
    });
  }

  handleLocaleDecimalSeparator(event): any {
    //TODO: should do the trick
  }
}
Carlos Henrique Motta
  • 1
  • 2

2 Answers2

1

You could create a custom form control. This might be helpfull https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

Bogdan B
  • 846
  • 9
  • 23
0

The another way of doing is you can use numeric validator of @rxweb/reactive-form-validators which provides decimal with locale support. I have set isFormat and allowDecimal true in numeric validator, isFormat is used to format the currency value as per the locale and allowDecimal is allow the value to be decimal.

Here is the components ts code :

  ngOnInit() {
        this.form = this.fb.group({
      total_area: [this.property.totalarea,
        RxwebValidators.compose(
          {validators:
          [RxwebValidators.required(),
          RxwebValidators.numeric({allowDecimal:true,isFormat:true})],
          })]
    });
    }

please refer this working example Stackblitz

Ushmi Dave
  • 276
  • 1
  • 7