Use more than one CustomValueAcessor in one Input field

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior I have created 2 directives with a CustomValueAcessor, and when I use them in an field I got the following error:

Error: Uncaught (in promise): Error: More than one custom value accessor matches form control with unspecified name attribute

Expected behavior The input field should accept more than 2 CustomValueAcessor

Minimal reproduction of the problem with instructions

http://plnkr.co/edit/zPz40DNYmAO7mokJ09a9?p=preview

Please tell us about your environment:

“dependencies”: { “@angular/animations”: “^4.1.0”, “@angular/cli”: “^1.0.0-beta.28.3”, “@angular/common”: “^4.1.0”, “@angular/compiler”: “^4.1.0”, “@angular/compiler-cli”: “^4.1.0”, “@angular/core”: “^4.1.0”, “@angular/forms”: “^4.1.0”, “@angular/http”: “^4.1.0”, “@angular/platform-browser”: “^4.1.0”, “@angular/platform-browser-dynamic”: “^4.1.0”, “@angular/platform-server”: “^4.1.0”, “@angular/router”: “^4.1.0” }

• Angular version: 2.0.X

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version =

[remborg]

As mentioned above, text-mask won’t work with material2. A workaround is to use the vanilla version of text-mask: 1 - Import the library in your component import * as textMask from "vanilla-text-mask/dist/vanillaTextMask.js";

2 - Add your mask in the component and init your input (don’t forget to import AfterViewInit and implement it to your component)

  mask = [ /[1-9]/, /\d/, /\d/];
  maskedInputController;

  @ViewChild("input", { read: ViewContainerRef }) public input;

  ngAfterViewInit(): void {
    setTimeout(() => {
      this.maskedInputController = textMask.maskInput({
        inputElement: this.input.element.nativeElement,
        mask: this.mask
      });
    });
  }

  ngOnDestroy() {
    this.maskedInputController.destroy();
  }

3 - in your template, make sure the input element has an #input attribute

<mat-form-field class="input">
  <input matInput [matDatepicker]="picker" [(ngModel)]="selectedValue" #input>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

[brandon1525]

i have a solution with a directive using the solution of @remborg

import { Directive, ElementRef, OnDestroy } from '@angular/core';
import * as textMask from 'vanilla-text-mask/dist/vanillaTextMask.js';

@Directive({
  selector: '[appMaskDate]'
})
export class MaskDateDirective implements OnDestroy {

  mask = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/]; // dd/mm/yyyy
  maskedInputController;

  constructor(private element: ElementRef) {
    this.maskedInputController = textMask.maskInput({
      inputElement: this.element.nativeElement,
      mask: this.mask
    });
  }

  ngOnDestroy() {
    this.maskedInputController.destroy();
  }

}

<input matInput formControlName="FechaInicio" [matDatepicker]="FechaInicioRef" placeholder="Fecha Inicio" appMaskDate>