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.

Answer 1

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)">