2

私は、2つのテキストの間にイオントグルを備えた、正式に機能するカスタムテンプレートを持っています。変更イベントをキャッチするにはどうすればよいですか? これは短縮されたコード例です:

カスタム形式のアイデア:

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 と change イベントを試してみましたが、動作しませんでした。値自体がないことが問題になる可能性があると思いますが、それをカスタム トグルに追加する方法がわかりません。おそらく to.checked change のような属性を取得する方法は何でもいいでしょう。何か案が？

4

3 に答える 3

1

必要な属性はionChangeと呼ばれます。これは ionic フレームワーク要素であるため、慣例のデフォルトを使用するだけでは動作が保証されません。

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>
 `,
于 2021-05-06T15:37:58.737 に答える