I am trying to encapsulate a ponent (for example called custom-input) as a formControl element based on Angular material ponents to contain the following:

<mat-form-field >
  <input
    matInput
    [formControl]="inputField"
    formControlName="{{ name }}"
    name="{{ name }}"
    maxlength="{{ maxlength }}"
    placeholder="{{ name | translate }}"
    required
  />
  <mat-error *ngIf="inputField.errors">{{
    this.validationService.getErrorMsg(inputField.errors)
  }}</mat-error>
</mat-form-field>

Now this ponent is working with the needed functionality but can't be bound to formGroup using the formControlName attribute like the normal input or matInput (like the below for example, which is bound directly to the formGroup without issues)

<input
  matInput
  formControlName="inputField123"
  placeholder="{{ 'testInput' | translate }}"
  required
/>

The question is how to enable the posed ponent above to be bound as a formControl element in the formGroup? what should I implement or expose to provide this functionality?

Should I use ControlValueAccessor or there is a better way that shall be used for Material input ponents?

I am trying to encapsulate a ponent (for example called custom-input) as a formControl element based on Angular material ponents to contain the following:

<mat-form-field >
  <input
    matInput
    [formControl]="inputField"
    formControlName="{{ name }}"
    name="{{ name }}"
    maxlength="{{ maxlength }}"
    placeholder="{{ name | translate }}"
    required
  />
  <mat-error *ngIf="inputField.errors">{{
    this.validationService.getErrorMsg(inputField.errors)
  }}</mat-error>
</mat-form-field>

Now this ponent is working with the needed functionality but can't be bound to formGroup using the formControlName attribute like the normal input or matInput (like the below for example, which is bound directly to the formGroup without issues)

<input
  matInput
  formControlName="inputField123"
  placeholder="{{ 'testInput' | translate }}"
  required
/>

The question is how to enable the posed ponent above to be bound as a formControl element in the formGroup? what should I implement or expose to provide this functionality?

Should I use ControlValueAccessor or there is a better way that shall be used for Material input ponents?

• javascript
• angular
• typescript
• angular2-forms
• angular-reactive-forms

Share Improve this question Follow asked Feb 25, 2019 at 13:29 Ahmed ElkoussyAhmed Elkoussy 8,5981212 gold badges6767 silver badges9292 bronze badges 1

• 2 "Should I use ControlValueAccessor". Yes. – Roberto Zvjerković Commented Feb 25, 2019 at 14:07

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

After searching around for long time, mainly because the ControlValueAccessor was advised for the primitive html parts (like input or so, not for material ponents, which I thought might have some easier wrapping technique)

I finally found out that we can implement ControlValueAccessor as advised, or since this is an input field, we can use DefaultValueAccessor like this

@Component({
  selector: 'app-test-input',
  templateUrl: './test-input.ponent.html',
  styleUrls: ['./test-input.ponent.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => testInputComponent),
      multi: true
    }
  ]
})
export class testInputComponent implements ControlValueAccessor {
  @Input() name = '';
  @Input() maxlength = 250;
  @Input() width = 30;

  @ViewChild(DefaultValueAccessor) valueAccessor: DefaultValueAccessor;

  writeValue(obj: any) {
    this.valueAccessor.writeValue(obj);
  }

  registerOnChange(fn: any) {
    this.valueAccessor.registerOnChange(fn);
  }

  registerOnTouched(fn: any) {
    this.valueAccessor.registerOnTouched(fn);
  }

  setDisabledState(isDisabled: boolean) {
    this.valueAccessor.setDisabledState(isDisabled);
  }

  constructor(public dataService: DataService) {
  }

}

The html part is like this:

<mat-form-field fxFlex="100" >
  <input
    matInput
    formControlName="{{ name }}"
    maxlength="{{ maxlength }}"
    placeholder="{{ name | translate }}"
    required
  />
  <mat-error *ngIf="matInputSelector.errors">{{
    this.dataService.getErrorMsg(matInputSelector.errors)
  }}</mat-error>
</mat-form-field>

Note

if I use formControlName="{{ name }}" I can bind the control to the formGroup, however, I can't use the formControl attribute to bind to the error part of the ponent

i.e: I can either use:

1- formControl (can control the error part)

OR

2- use formControlName (binded to the outer formGroup, but can't control the error part)

So if someone has a better answer, please post it to help everyone.