настроенный виджет не возвращает значение в форму схемы Angular Json (ajsf)

Question

Я использую последнюю версию Angular с версией AJSF 0.8.0. Я создал компонент переключения Да/Нет и зарегистрировал виджет. Я вижу, что компонент визуализируется, но когда я нажимаю кнопку переключения, ничего не происходит. Итак, я предполагаю, что нам нужно каким-то образом сообщить ajsf, что это значение, поступающее от нового компонента, но я не уверен, как это можно настроить.

Вот что я сделал:

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

и это простой html, который создал:

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

а затем в основном компоненте, где у меня есть ajsf, я регистрирую его так:

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

Я вижу, что новый виджет заменяется в форме, но когда я устанавливаю флажок, в форму ajsf не отправляется значение. Я не смог найти ни одной полезной детали ни в одном документе и задаюсь вопросом, делал ли кто-нибудь это раньше.

Answer 1

После некоторых инженерных изысканий я нашел решение. В зависимости от характера вашего компонента вам может потребоваться реализовать его по-разному. В моем примере это был флажок, поэтому в итоге у меня был такой компонент:

        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);
  }
}

и html такой:

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