Angular ValueAccessor not working with Objects

[hypery2k]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior: When passing object in a custom select for example it's not working in all cases. Angular expects the formcontrol directly onto the select element.

So when passing objects via [ngValue] you just get a string value, but not the object.

Expected behavior: Using the objects as values...

Steps to reproduce: Can create a sample repo, if needed

Related code:

To overcome this we created a custom directive for that, maybe it's a good idea to include this directly in StencilJS

@Directive({
  selector:
    // tslint:disable-next-line: directive-selector
    'my-select[formControl], my-select[formControlName], my-select-multiple[formControl], my-select-multiple[formControlName]',
  // tslint:disable-next-line: no-host-metadata-property
  host: {
    '(iamaFormItemChanged)': 'handleChangeEvent($event.target.value)'
  },
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => ExtendedMultiSelectControlValueAccessor),
      multi: true
    }
  ]
})
// tslint:disable-next-line: directive-class-suffix
export class ExtendedMultiSelectControlValueAccessor extends SelectMultipleControlValueAccessor {
  constructor(renderer: Renderer2, elementRef: ElementRef) {
    super(renderer, elementRef);
  }

  handleChangeEvent(values: any[]): void {
    // mock options
    this.onChange({
      options: {
        length: values.length,
        item: (index: number) => {
          return { selected: true, value: values[index] };
        }
      }
    });
  }
}

// tslint:disable-next-line: directive-selector
@Directive({ selector: 'option' })
// tslint:disable-next-line: directive-class-suffix
export class ExtendedSelectMultipleOption extends ɵNgSelectMultipleOption {
  constructor(
    element: ElementRef,
    renderer: Renderer2,
    @Optional() @Host() select: ExtendedMultiSelectControlValueAccessor
  ) {
    super(element, renderer, select);
  }
}

Other information:

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!