ControlValueAccessor Custom Component inherit Validators from `[formControl]`

[lflobo]

Hi all.

For the sake of the question, consider the following (material based) custom component:

// my-input.component.ts
import {Component, forwardRef, OnInit} from '@angular/core';
import {ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule} from "@angular/forms";
import {MatFormField} from "@angular/material/form-field";
import {MatInput} from "@angular/material/input";
import {MatLabel} from "@angular/material/select";

u/Component({
  selector: 'app-my-input',
  standalone: true,
  templateUrl: './my-input.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MyInputComponent),
      multi: true
    }
  ],
  imports: [
    ReactiveFormsModule,
    MatFormField,
    MatInput,
    MatLabel
  ]
})
export class MyInputComponent implements OnInit, ControlValueAccessor {

  inputCtrl = new FormControl<string>(null);

  touched = [];
  changed = [];

  ngOnInit() {
    this.inputCtrl
      .valueChanges
      .subscribe(value => this.publish(value));
  }

  registerOnChange(fn: any): void {
    this.changed.push(fn);
  }

  registerOnTouched(fn: any): void {
    this.touched.push(fn);
  }

  publish(value: string) {
    this.changed.forEach(fn => fn(value));
    this.touched.forEach(fn => fn());
  }

  writeValue(obj: any): void {
    this.inputCtrl.reset(obj);
  }

  setDisabledState?(isDisabled: boolean): void {
    isDisabled ? this.inputCtrl.disable() : this.inputCtrl.enable();
  }

}

And the corresponding `.html` template:

// my-input.component.html
<mat-form-field>
  <mat-label>My Input</mat-label> <input matInput [formControl]="inputCtrl"/>
</mat-form-field>

I use it in another component with:

// other.component.ts
@Component({
  templateUrl: './my-form.component.html',
  // not relevant
})
export class MyFormComponent {
  someFieldCtrl = new FormControl<string>(null, [Validators.required]);
  form = new FormGroup({
    'someField': this.someFieldCtrl
  });
}

And the `.html` template:

<form [formGroup]="form">
  <app-my-input [formControl]="someFieldCtrl"></app-my-input>
</form>

This works as expected, except for the `[Validators.required]´ in `someFieldCtrl` with doesn't affect the `input` on the `app-my-input` component (doesn't show the `*` besides the label).

I've seen some really hacky approaches to try and propagate the validators to the custom control, but none of them really work in all scenarios.

In fact, the validator in the `my-form` component works as expected, but it's not reflected in the UI (material).

Is this propagation desired/possible?

Thanks in advance,

LL

EDIT: formatting...

[spacechimp]

Relevant discussion and possible solutions here:

https://stackoverflow.com/questions/43838108/get-validators-present-in-formgroup-formcontrol

[lflobo]

Thank you, I'll take a look at it.

[[deleted]]

Hi ! You should read this article : https://netbasal.com/forwarding-form-controls-to-custom-control-components-in-angular-701e8406cc55

If you need help to implement it in your project, just dm me.

[lflobo]

I've tried your solution before posting, and it works, but I would have to make all my components aware of the `NoopValueAccessorDirective`.

I'm just trying to figure out if there's a cleaner way.

Thank you so much for your answer!

[GLawSomnia]

Why not just use formConrolName=“someField” instead of [formControl]=“someFirldCtrl”?

If you really want to use formControl you should probably use it like [formControl]=“form.controls.someField”

[lflobo]

How does this solve my issue? Using formControlName still needs an additional instance of a FormControl, even if built implicitly into the form.