When using the Form component, you can implement background saving of user input by tracking the form for changes. In the example below, the sample vehicles collection has been added as a Data Service to the my-view Blank-type view. A Form has been added on the view that houses a TextField bound to the vehicle's make backend field.


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

export class MyViewViewComponent extends MyViewViewBaseComponent {
    // get a reference to the Form component
    @ViewChild('mobileform0', { static: false }) mobileform0: KSFormComponent;

    constructor(@Inject(Injector) injector: Injector) {
        super(injector);
    }

    ngAfterViewInit(): void {
        const { formGroup } = this.mobileform0;
        // listen to the Form component's group for value changes in any of its fields
        // for a specific field, for example 'make', we can use `formGroup.controls['make'].valueChanges`
        formGroup.valueChanges
            .pipe(
                // dismiss events with no changes
                distinctUntilChanged((x, y) => JSON.stringify(x) === JSON.stringify(y)),
                // skip the initial load of the entity
                skip(1),
                // the timeout before we initiate the submit
                debounceTime(500),
                // verify that the form is in dirty state and we haven't already initiated a submit
                filter(() => formGroup.dirty && !this.mobileform0.isLoading)
            )
            .subscribe(() => {
                this.mobileform0.onSubmit();
                formGroup.markAsPristine();
            });
    }
}