customized widget doesn't return a value to Angular Json Schema Form (ajsf)

Question

I am using latest Angular with AJSF version 0.8.0. I have created a Yes/No toggle component and register the widget. I can see the component is rendered but when I click on a toggle button, nothing happens. So my guess is somehow we need to tell the ajsf this is the value coming from the new component, but not sure how that can be configured.

This is what I have done:

export class ToggelWidgetComponent  {                                            
   @Input() value: boolean = false;
                                                                                
   @Output() onChange = new EventEmitter<boolean>();  
          
                                                                      
   handleChange(value: boolean) { <some codes here>}                                    
}

and this is a simple html that created:

<input type="checkbox" name="something">

and then in the main component where I have ajsf I register it like:

ngOnInit() {                             
  this.widgetLibraryService.registerWidget('toggle-widget', ToggelWidgetComponent);}

I can see the new widget is replaced in the form but when I click the checkbox, no value is sent to the ajsf form. I couldn't find any useful detail in any document and wonder if anyone has done this before.

Maybe your custom component needs to implement [ControlValueAccessor](https://angular.io/api/forms/ControlValueAccessor)? — BizzyBob, Oct 05 '22 at 20:39
Do you call `this.onChange.emit(value)` in you `handleChange(value: boolean)`? — Michel Hervé NGOUNOU, Oct 05 '22 at 20:44
yes @MichelHervéNGOUNOU, I have it there but not sure how their library uses onChange. I came up with those names (onChange and value) not I am not sure how I can link it to their implementation — Arash EM, Oct 05 '22 at 21:04
yes @BizzyBob, I tried that too but no luck - seems ajsf handles it differently — Arash EM, Oct 05 '22 at 21:25

Arash EM · Accepted Answer · 2022-10-06T18:21:37.983

After doing some revere engineering, I found the solution. Depending on the nature of your component, you might need to implement differently. For my example, it was a checkbox so I ended up having my component like this:

  import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
  import { JsonSchemaFormService} from '@ajsf/core';
  
  export class ToggelWidgetComponent implements OnInit {
  options: any;                                                       
  @Input() layoutNode: any;
  @Input() layoutIndex!: number[];
  @Input() dataIndex!: number[];

  constructor(
    private jsf: JsonSchemaFormService
  ) { }

  ngOnInit() {
    this.options = this.layoutNode.options || {};
    this.jsf.initializeControl(this, !this.options.readonly);
  }

  updateValue(event) {
    this.options.showErrors = true;
    this.jsf.updateValue(this, event.target.value);
  }
}

and the html is like:

<input type="checkbox" 
   [checked]="isChecked"
   (change)="updateValue($event)">

customized widget doesn't return a value to Angular Json Schema Form (ajsf)

1 Answers1