时间戳

首页 > 解决方案 > Angular 正式 5.10.3 更改时的自定义切换事件

angular - Angular 正式 5.10.3 更改时的自定义切换事件

问题描述

我有一个正式的工作自定义模板，在两个文本之间有一个离子切换。我怎样才能捕捉到变化事件？这是一个简化的代码示例：

定制形式的想法：

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 改变这样的属性都可以。任何的想法？

标签： angularionic-frameworkngx-formly

解决方案

您需要的属性称为 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>
 `,

推荐阅读