Ionic Angular formly 5.10.3自定义切换事件

bwleehnv  于 2023-05-05  发布在  Ionic
关注(0)|答案(3)|浏览(166)

我有一个工作自定义模板formly与离子切换bethen两个文本。如何捕获更改事件?这是一个简化的代码示例:
自定义形式的想法:

import { Component } from '@angular/core';
import { FieldType } from '@ngx-formly/core';

@Component({
 selector: 'formly-field-input',
 template: `
   <span class="toggleContainer">
      <p [class]="to.checked ? '' : 'toggleSelected'"> {{ to.textBefore }} </p>
      <ion-toggle 
        [checked]="to.checked" 
        [disabled]="to.disabled" 
        color="primary">
      </ion-toggle>
      <p [class]="to.checked ? 'toggleSelected' : ''"> {{ to.textAfter }} </p>
   </span>
 `,
 styleUrls: ['./toggle-2-labels.component.scss'],
})
export class toggle2LabelsComponent extends FieldType { }

添加到表单的输入:

{
    key: 'exampleName',
    type: 'toggle2Labels',
    wrappers: ['acc-wrapper'],
    templateOptions: {
        disabled: true,
        checked: false,
        textBefore: 'something',
        textAfter: 'something',
        onChange: (field, value) => console.log('onChange'),
        change: (field, $event) => {
            console.log('change');
        },
    },
    hooks: {
        onInit: (field: FormlyFieldConfig) => {
            //Other stuff
        },
    }
 },

我尝试了onChange和更改事件,但没有工作。我认为这可能是一个本身没有值的问题,但我不知道如何将它添加到我的自定义切换。也许任何类型的方法来获得一个属性,如to.checked change都可以。你知道吗?

qv7cva1a

qv7cva1a1#

最后我明白了,formly onChangechange事件不适用于自定义输入(它们也不适用于formly guide示例),所以对我来说,解决方案是在自定义输入模板上获取(ionChange)事件,并在init上使用钩子,如示例所示;
自定义形式:

import { Component } from '@angular/core';
import { FieldType } from '@ngx-formly/core';

@Component({
 selector: 'formly-field-input',
 template: `
   <span class="toggleContainer">
      <p [class]="to.checked ? '' : 'toggleSelected'"> {{ to.textBefore }} </p>
      <ion-toggle 
        <ion-toggle 
          [formControl]="formControl" 
          [formlyAttributes]="field"
          [value]="to.checked"
          [checked]="to.checked" 
          [disabled]="to.disabled" 
          (ionChange)="formControl.setValue(to.checked)"
        color="primary">
        color="primary">
      </ion-toggle>
      <p [class]="to.checked ? 'toggleSelected' : ''"> {{ to.textAfter }} </p>
   </span>
 `,
 styleUrls: ['./toggle-2-labels.component.scss'],
})
export class toggle2LabelsComponent extends FieldType { }

自定义输入

{
    key: 'exampleName',
    type: 'toggle2Labels',
    wrappers: ['acc-wrapper'],
    templateOptions: {
        disabled: true,
        checked: false,
        textBefore: 'something',
        textAfter: 'something',
        onChange: (field, value) => console.log('onChange'),
        change: (field, $event) => {
            console.log('change');
        },
    },
    hooks: {
        onInit: (field: FormlyFieldConfig) => {
            field.formControl.valueChanges.subscribe(() => {
                console.log('only works here for me');
            });
        },
    }
 },
oaxa6hgo

oaxa6hgo2#

您需要的属性称为ionChange。因为这是一个离子框架元素,所以简单地使用约定默认值并不能保证有效。

template: `
   <span class="toggleContainer">
      <p [class]="to.checked ? '' : 'toggleSelected'"> {{ to.textBefore }} </p>
      <ion-toggle 
        (ionChange)="() => console.log('onChange')"
        [checked]="to.checked" 
        [disabled]="to.disabled" 
        color="primary">
      </ion-toggle>
      <p [class]="to.checked ? 'toggleSelected' : ''"> {{ to.textAfter }} </p>
   </span>
 `,
l0oc07j2

l0oc07j23#

Html文件

<span class="toggleContainer">
      <p [class]="to.checked ? '' : 'toggleSelected'">{{ to.textBefore }}</p>
      <ion-toggle
        (ionChange)="changeToggle($event)"
        [checked]="to.checked"
        [disabled]="to.disabled"
        color="primary"
      >
      </ion-toggle>
      <p [class]="to.checked ? 'toggleSelected' : ''">{{ to.textAfter }}</p>
    </span>

ts文件

public to = {
    checked: false,
    disabled: false,
    textBefore: 'something',
    textAfter: 'something'
  };
  changeToggle(event: any) {
    console.log(event.value);
    this.to.checked = event.value;
  }

相关问题