AG Grid CellEditor:带有ngx-datepicker和[(ngModel)]的ngx-mask不起作用

时间:2018-10-09 23:16:29

标签: angular ag-grid ngx-bootstrap

我有一个CellEditor,我想在输入元素中使用mask属性。

我收到错误More than one custom value accessor matches form control with unspecified name attribute

我想将99.99.9999蒙版应用于CellEditor。

我可以将mask属性与[[ngModel)]一起使用吗?

模板:

<div class="input-group date" (focusout)="onFocusOut($event)">
<input #container triggers="" type="text" #dp="bsDatepicker" class="form-control" (bsValueChange)="onValueChange($event)" bsDatepicker
mask="99.99.9999"
showMaskTyped="true"
[bsConfig]="{ dateInputFormat: 'DD.MM.YYYY', containerClass: 'theme-dark-blue' }"
[(ngModel)]="dateValue"
[minDate]="minDate"
[maxDate]="maxDate">
<span class="input-group-addon" (click)="dp.toggle();" [attr.aria-expanded]="dp.isOpen">

component.ts

import { Component, OnInit, AfterViewInit, ViewChild, ViewContainerRef } from '@angular/core';
import { ICellEditorAngularComp } from 'ag-grid-angular';

import { defineLocale } from 'ngx-bootstrap/chronos';
import { deLocale } from 'ngx-bootstrap/locale';
import { BsLocaleService, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
defineLocale('de', deLocale);

@component({
selector: 'bo-ui-grid-date-picker',
templateUrl: './grid-date-picker.component.html',
styleUrls: ['./grid-date-picker.component.css']
})
export class GridDatePickerComponent implements ICellEditorAngularComp, AfterViewInit {

private params: any;
public dateValue: Date;
minDate: Date;
maxDate: Date;
datePickerConfig: Partial;

@ViewChild('container', {read: ViewContainerRef }) public container;

constructor(private localeService: BsLocaleService) {}

ngAfterViewInit() {
setTimeout(() => {
this.container.element.nativeElement.focus();
})
}

agInit(params: any): void {
this.params = params;
this.datePickerConfig = params.datePickerConfig;
this.minDate = this.datePickerConfig.minDate;
this.maxDate = this.datePickerConfig.maxDate;
this.setValue(params.value);
this.localeService.use('de')
}

... }

0 个答案:

没有答案