Guide to encapsulating an angular material form within a component and making it accessible to the FormGroup as a formControl property

Question

Guide to encapsulating an angular material form within a component and making it accessible to the FormGroup as a formControl property

My goal is to create a custom component (let's call it custom-input) that acts as a formControl element using Angular material components. It should include the following structure:

<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>

The current setup works as intended but I'm facing an issue where my custom component cannot be directly bound to a formGroup using the formControlName attribute, unlike a normal input or matInput. The following code, for instance, binds successfully without any problems:

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

My question is how can I enable my composed component above to be bound as a formControl element within a formGroup? What steps should I take or what should I expose in order to make this functionality possible?

Should I use ControlValueAccessor or is there a different approach that would be more suitable for Material input components?

javascript angular typescript angular2-forms angular-reactive-forms

Answer 1

Answer №1

After extensive searching, I discovered that while the ControlValueAccessor is recommended for basic HTML elements like inputs, it may not be as straightforward for material components. I was hoping for a simpler solution.

Eventually, I found that we can either implement ControlValueAccessor as suggested, or opt for DefaultValueAccessor when dealing with an input field.

@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 component looks 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

Using formControlName="{{ name }}" allows binding to the formGroup, but it restricts control over the error section within the component.

This means you can either:

1- use formControl (for control over errors)

OR

2- use formControlName (linked to formGroup but limited control over errors)

If you have a better solution, please share it to benefit others.

Answer 2

After extensive searching, I discovered that while the ControlValueAccessor is recommended for basic HTML elements like inputs, it may not be as straightforward for material components. I was hoping for a simpler solution.

Eventually, I found that we can either implement ControlValueAccessor as suggested, or opt for DefaultValueAccessor when dealing with an input field.

@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 component looks 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

Using formControlName="{{ name }}" allows binding to the formGroup, but it restricts control over the error section within the component.

This means you can either:

1- use formControl (for control over errors)

OR

2- use formControlName (linked to formGroup but limited control over errors)

If you have a better solution, please share it to benefit others.

Guide to encapsulating an angular material form within a component and making it accessible to the FormGroup as a formControl property

Answer №1

Note

Similar questions

Uploading files in Angular application

Does Firebase only send a single input value instead of a Span?

What could be the reason for the lack of impact when assigning a [dateClass] in mat-calendar?

What steps can I take to ensure that AstroJS components do not conceal SVG elements when the SVG is incorporated into another file with client:load?

Show informational pop-up when hovering over selected option

Creating a customized pagination feature in Angular 8 without relying on material design components

Sequencing code execution correctly in Node.js

Getting Your Redux Form Ready for Submission

What is the technique for defining sub paths in React-Router-Dom by excluding the parent path?

Is there a way to replicate this exact toggle selection functionality from Angular Material using just HTML and CSS?

Getting the most out of Nexmo with multiple websocket connections

Having trouble with the join and leave command? The leave function seems to be malfunction

Using TypeScript with React may result in an error message stating that a string cannot be assigned to a parameter of type 'keyof T'

Ways to avoid storing repeating paragraphs in JavaScript Array?

Is utilizing v-model to update the Vuex store a recommended practice?

Firebase initialization unsuccessful due to incorrect directory placement

When representing audio as sound bars on a canvas, the previous drawing is retained if canvas height is not specified

Can someone guide me on the proper implementation of the 'useEffect' hook in React version 18?

The submit button is not reading the JavaScript file for validation and instead goes directly to my PHP file

Issues with implementing the link component in next.js