我有一个工作自定义模板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都可以。你知道吗?
3条答案
按热度按时间qv7cva1a1#
最后我明白了,formly
onChange
和change
事件不适用于自定义输入(它们也不适用于formly guide示例),所以对我来说,解决方案是在自定义输入模板上获取(ionChange)
事件,并在init上使用钩子,如示例所示;自定义形式:
自定义输入
oaxa6hgo2#
您需要的属性称为ionChange。因为这是一个离子框架元素,所以简单地使用约定默认值并不能保证有效。
l0oc07j23#
Html
文件ts
文件