首页 > 解决方案 > 我已经构建了一个自定义的表单控件,如何在 onInit 生命周期挂钩中订阅它的自定义事件?

问题描述

我的自定义正式控件有一个“optionChanged”事件,如下所示:

@Component({
  selector: 'app-formly-company-search',
  templateUrl: './formly-company-search.component.html',
  styleUrls: ['./formly-company-search.component.scss']
})
export class FormlyCompanySearchComponent extends FieldType implements OnInit {
  label: string;
  @Output() optionChanged = new EventEmitter<string>();
  constructor() {
    super();
  }

  ngOnInit() {
    this.label = this.field.templateOptions.label;

    if (this.field.templateOptions.required) {
      this.label += " *";
    }
  }

  onOptionChanged(option) {
    //console.log("new option: ", option);
    this.field.templateOptions.optionChanged(option);
  }
}

通过在上面的 templateOptions 中调用 optionChanged,当我在 FormlyFieldsConfig 中定义控件时,我可以实现一个事件处理程序,如下所示:

this.fields = [
  {
    fieldGroup: [
      {
        key: 'EmployerKey',
        type: 'company-search',
        templateOptions: {
          required: true,
          label: 'Employer Search',
          optionChanged: ($event) => {
            this.setPaySchedulesForEmployer2($event);
            this.setTaxYearsForEmployer($event);
          }
        }
      },

哪个效果很好。但我也想在 onInit 生命周期挂钩中订阅这个事件(就像我为 valueChanges 事件所做的那样),以获取另一个像这样的正式控件:

      {
        key: 'PayFrequency',
        type: 'select',
        templateOptions: {
          label: 'Pay Frequency',
          valueProp: 'Key',
          labelProp: 'Text'
        },
        hooks: {
          onInit: (field: FormlyFieldConfig) => {
            let employerControl = this.form.get("EmployerKey");
            this.subs.add(employerControl.optionChanged.subscribe(result => {
              this.onEmployerChanged(field);
            }));
          }
        }
      },

但是当然“employerControl”FormControl 没有那个事件“optionChanged”所以​​我不知道我该怎么做呢?谢谢。

标签: angularngx-formly

解决方案


推荐阅读