Cannot create a custom MatFormFieldControl that implement ControlValueAccessor

Bug, feature request, or proposal:

Bug/Feature Request

What is the expected behavior?

The guide “Creating a custom form field control” should give an example with a custom MatFormFieldControl that implement ControlValueAccessor.

What is the current behavior?

The guide advise us to use:

constructor(..., @Optional() @Self() public ngControl: NgControl) { ... }

But it leads to a cyclic dependancy error:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Cannot instantiate cyclic dependency! NgControl

What are the steps to reproduce?

Here is a StackBlitz

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/material: 2.0.0-beta.12 @angular/core: 4.4.4 @angular/cli: 1.4.4 typescript: 2.4.2 Windows 10 64bit Chrome/Firefox/Edge

Is there anything else we should know?

I do not think so.

[tesseris]

Please provide a tutorial of a MatFormFieldControl that implements ControlValueAccessor…

[GuillaumeNury]

@ADegele Yes ! I struggled a lot with it !

Here is what I have done:

// Just add this in your constructor
if (this.ngControl) {
	this.ngControl.valueAccessor = this;
}