The following example converts a vehicle's model year from string to number before submitting a form. It operates on a my-view Blank-type view that has the vehicles collection added as a Data Service. The view houses a Form component with a TextField bound to the vehicle's year field.


You need to write to provide the logic in the onBeforeSubmit event handler of the Form. Take the following steps:


  1. Select the Form oн the canvas in Design mode.
  2. Under Submit Events, find On before submit and click Custom handler.
  3. Click Save and then Generate.
  4. Switch to Code mode and open the my-view.base.component.tns.ts file.
  5. Copy the onBeforeSubmit() event handler from the base class and paste it in the my-view.component.tns.ts file.

    The handler's name's prefix will differ depending on the name of the form, for example mobileform0_onBeforeSubmit().

  6. Edit the handler as shown below:


import { Inject, Injector } from '@angular/core';
import { MyViewViewBaseComponent } from '@src/app/modules/mymod/my-view/my-view.base.component';
import { KSFormComponent } from '@src/app/shared/components/mobile-form/form.component.tns';

export class MyViewViewComponent extends MyViewViewBaseComponent {
    constructor(@Inject(Injector) injector: Injector) {
        super(injector);
    }

    protected mobileform0_onBeforeSubmit(args: { form: KSFormComponent; item: any; cancelled: boolean }): Promise<void> | void {
        args.item.year = +args.item.year;
    }
}