如何解决将 ngx-mask 指令添加到现有的 Angular 组件类
有没有办法将指令 - ngx-mask
在我的例子中 - 添加到现有的具有 named HTML 元素 input
(#datePicker
在下面的例子中)?
示例设置
假设我有一个名为 InputDate.component.ts
的组件,如下所示。组件中的模板 - HTML 部分 - 调用另一个其选择器为 bb-input-datepicker-ui
的组件。此选择器的组件 - InputDatepicker.component.ts
- 在其模板中包含 label
和 input
等元素,但假设我们没有立即可用的源代码 - 我们只能通过以下方式将值传递给它@Input()
字段。
@Component({
selector: 'bb-us-formly-input-date',template: `<bb-input-datepicker-ui
[label]="to.label"
[formControl]="formControl"
[minDate]="to.minDate"
#datePicker
></bb-input-datepicker-ui>
`,})
export class InputDateComponent extends FieldType implements AfterViewInit {
@ViewChild('datePicker',{ static: true })
datePickerComponent: any;
ngAfterViewInit() {
// sample experiment code
let comp:HTMLElement = this.datePickerComponent.datePickerInput.nativeElement;
comp.setAttribute('placeholder','77/99/5555')
comp.setAttribute('mask','00/00/0000')
console.log('==',comp);
}
}
愿望
我希望能够在 ngx-mask
的 InputDatepicker
元素上锁定 input
指令。现在,如果我在最后重新创建 InputDatepicker
组件,我需要做的就是添加一个像这样的掩码 key=value 对作为 {{ 1}}:
input
这将保证两件事:1)只能输入数字,2)日期自动格式化为显示的掩码 - 很棒。
也就是说,我想按原样使用 <input ... mask="00/00/0000" ...>
组件,最好不要在我最后重新创建它。因此,问题是:我可以以某种方式动态添加掩码指令吗?
已经完成...
如果您看到上面的 InputDatepicker
,您应该会看到这样做的尝试。 ngAfterViewInit()
将打印类似于下面的输出,并显示正在添加的 console.log
属性并且 UI 会显示它。然而,placeholder
指令没有运气,即使它显示在输出中。我想这不是动态锁定 mask
元素上的指令的正确方法。
input
感谢您的朋友。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。