Wijmo – Reactive Form – Did not work at all

Posted by: RelationsTechniquesDev on 3 May 2022, 11:00 pm EST

  • Posted 3 May 2022, 11:00 pm EST

    Hello,
    We are aware of this forum’s post:
    https://www.grapecity.com/forums/wijmo/angular2-reactive-model-dr_1

    So, we have tried to understand your bug through an example:
    https://stackblitz.com/edit/angular-s82vip?file=src%2Fapp%2Fapp.component.html

    In this example, there are three forms:
    1- Template driven form
    2- Reactive form with the bug on WjInputDate (and all your component)
    3- Reactive form with a hack

    For each form, there are three columns:
    1- Label
    2- Control
    3- Control’s status (behind the scenes, it’s working with an AbstractControl)

    For each form, the third row contains the values associated for the form and the form’s status
    For each control, we have defined the option updateOn with the value ‘change’ (see API and https://angular.io/api/forms/FormControl#configure-the-control-to-update-on-a-blur-event)

    Expected behavior:
    1- Enter a character (or enter a valid date) in a control should update the first state from pristine to dirty
    2- Lost focus on a control should update the second state from untouched to touched
    3- Enter a character (or enter a valid date) in a control should update the third state from invalid to valid (because of the validator required)
    4- Values in form should be updated according to the option updateOn
    5- Form’s status should be updated too.
    We don’t have an issue with Template Driven Form.
    We have an issue with Reactive form.

    Solution:
    The issue seems to be the lack of events’ subscribe:
    private _updateDirective() {
    // patch: seems a bug introduced in RC.4 - ngModel always writes a null during initialization,
    // though the source value is not a null, so we avoid value propagation during the first call
    // using _notFirstChange.
    // Note that this is not the issue when accessors is initialized by the FormControlName->FormGroupDirective
    // (in scenarios like in Ng2 DynamicForms sample).
    if (!this._isFirstChange() || this._modelValue != null) {
    this._ensureNgModelProp();
    if (this._directive && this._ngModelProp) {
    let normValue = this._modelValue;
    // Ng2 converts nulls/indefined to '', we have to convert them back.
    if (normValue === '') {
    normValue = null;
    }
    this._directive[this._ngModelProp] = normValue;
    }
    this._ensureSubscribed();
    }
    }

    If we look at the Angular’s code, they always bind events, as shown below:
    https://github.com/angular/angular/blob/master/packages/forms/src/directives/checkbox_value_accessor.ts
    host: {'(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()'},

    https://github.com/angular/angular/blob/master/packages/forms/src/directives/number_value_accessor.ts
    host: {'(input)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},

    https://github.com/angular/angular/blob/master/packages/forms/src/directives/radio_control_value_accessor.ts
    host: {'(change)': 'onChange()', '(blur)': 'onTouched()'},

    https://github.com/angular/angular/blob/master/packages/forms/src/directives/range_value_accessor.ts
    host: {
    '(change)': 'onChange($event.target.value)',
    '(input)': 'onChange($event.target.value)',
    '(blur)': 'onTouched()'
    },


    https://github.com/angular/angular/blob/master/packages/forms/src/directives/select_control_value_accessor.ts
    host: {'(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},

    https://github.com/angular/angular/blob/master/packages/forms/src/directives/select_multiple_control_value_accessor.ts
    host: {'(change)': 'onChange($event.target)', '(blur)': 'onTouched()'},

    Our hack (see sample):
    WjValueAccessor,
    WjValueAccessorFactory,
    } from '@grapecity/wijmo.angular2.directivebase';

    export function extendedWjValueAccessorFactory<T>(
    directive: T
    ): WjValueAccessor {
    const wjValueAccessor = WjValueAccessorFactory(directive);
    (<any>wjValueAccessor)._ensureSubscribed();
    return wjValueAccessor;
    }
    and
    import { Component, forwardRef } from '@angular/core';
    import { NG_VALUE_ACCESSOR } from '@angular/forms';
    import { WjInputDate } from '@grapecity/wijmo.angular2.input';
    import { extendedWjValueAccessorFactory } from './extended-wj-value-accessor-factory';

    @Component({
    selector: 'extended-wj-input-date',
    template: '',
    providers: [
    {
    provide: 'WjComponent',
    useExisting: forwardRef(() => ExtendedWjInputDateComponent),
    },
    {
    provide: NG_VALUE_ACCESSOR,
    useFactory: extendedWjValueAccessorFactory,
    multi: true,
    deps: ['WjComponent'],
    },
    ],
    })
    export class ExtendedWjInputDateComponent extends WjInputDate {}

    I understood your comment in the code
    // patch: seems a bug introduced in RC.4 - ngModel always writes a null during initialization,
    // though the source value is not a null, so we avoid value propagation during the first call
    // using _notFirstChange.
    // Note that this is not the issue when accessors is initialized by the FormControlName->FormGroupDirective
    // (in scenarios like in Ng2 DynamicForms sample).
    But you must subscribe to the events …

    Is it possible to have a correction of this bug?

    Best regards








  • Replied 5 May 2022, 3:00 pm EST

    Hello,

    Thank you for creating the sample. The provided hack seems to be working fine in your sample however we have escalated the issue to our Dev team for further investigation of the issue with an internal tracking ID WJM-6564. We will provide you with a response as soon as we get any updates.

    Regards
  • Replied 5 May 2022, 9:48 pm EST

    Thanks for the answer.
    We look forward to your response.
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels