How to wrap angular material form into a component & expose them to FormGroup as a formControl element

Question

I am trying to encapsulate a component (for example called custom-input) as a formControl element based on Angular material components 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 component 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 composed component 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 components?

Ahmed Elkoussy Ahmed Elkoussy · Accepted Answer · 2019-02-25T16:05:25

After searching around for long time, mainly because the ControlValueAccessor was advised for the primitive html parts (like input or so, not for material components, 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.component.html',
  styleUrls: ['./test-input.component.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 component

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.

How to wrap angular material form into a component & expose them to FormGroup as a formControl element

1 Answers

Note