Cannot create a custom MatFormFieldControl that implement ControlValueAccessor

[GuillaumeNury]

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.

[GuillaumeNury]

I find what was wrong: I had to remove the NG_VALUE_ACCESSOR provider on my custom-input

{
	provide: NG_VALUE_ACCESSOR,
	useExisting: forwardRef(() => CustomInputComponent),
	multi: true,
},

Maybe the guide should warn about that.

[ADegele]

I have a similar problem. However, removing the NG_VALUE_ACCESSOR provider yields the following error:

No value accessor for form control with path '...'

I'm trying to implement MatFormFieldControl.errorState, so I want to derive that from a Validator that is on the FormControl.
@GuillaumeNury how did you register your ControlValueAccessor with Angular?

[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;
}

[ADegele]

@GuillaumeNury Thank you very much!

[tesseris]

Please provide a tutorial of a MatFormFieldControl that implements ControlValueAccessor....

[mmalerba]

Anyone who has created a custom MatFormFieldControl with a ControlValueAccessor want to take a stab at improving the docs?

[merlosy]

I did implement a file input that works with MatFormField and ControlValueAccessor.

For what it's worth: https://plnkr.co/edit/VGCSprNVT1pobOxjWwmT?p=preview
If i find some time to update the docs, I can give a try.

[mmajrk]

A cyclic dependency error is also present when providing NG_VALIDATORS

@Component({
  ...
  providers: [
    {
      provide: MatFormFieldControl,
      useExisting: forwardRef(() => MyComponent)
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => MyComponent),
      multi: true
    }
  ]
})
export class MyComponent implements MatFormFieldControl<string>, ControlValueAccessor, Validator {
  constructor(@Optional() @Self() public ngControl: NgControl) {...}
  ...
}

Uncaught Error: Template parse errors: Cannot instantiate cyclic dependency! NgControl

https://stackoverflow.com/questions/48682339/matformfieldcontrol-that-implements-controlvalueaccessor-and-validator-creates-c

[mmajrk]

I solved the problem by removing Validator interface from the component and instead provided the validator function directly.

export function phoneNumberValidator(control: AbstractControl) {
  ...
}

@Component({
  selector: 'fe-phone-number-input',
  templateUrl: './phone-number-input.component.html',
  styleUrls: ['./phone-number-input.component.scss'],
  providers: [
    {
      provide: MatFormFieldControl,
      useExisting: forwardRef(() => PhoneNumberInputComponent)
    },
    {
      provide: NG_VALIDATORS,
      useValue: phoneNumberValidator,
      multi: true
    }
  ]
})
export class MyComponent implements MatFormFieldControl<string>, ControlValueAccessor { ... }

[qwe852147]

It has any idea to use NG_VALIDATORS in MatFormFieldControl?
I have use @malymato method to implement but some trouble to get component input variable e.g. min or max.

[owenhaynes]

advise for the above comment would be helpful