Wrapping a FormControl in Angular (2+)

Question

Edit:

I’ve added a helper for doing just this an angular utilities library I’ve started: s-ng-utils. Using that you can extend WrappedFormControlSuperclass and write:

@Component({
  selector: 'my-wrapper',
  template: '<input [formControl]="formControl">',
  providers: [provideValueAccessor(MyWrapper)],
})
export class MyWrapper extends WrappedFormControlSuperclass<string> {
  // ...
}

See some more documentation here.

One solution is to get the @ViewChild() corresponding to the inner form components ControlValueAccessor, and delegating to it in your own component. For example:

@Component({
  selector: 'my-wrapper',
  template: '<input ngDefaultControl>',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => NumberInputComponent),
      multi: true,
    },
  ],
})
export class MyWrapper implements ControlValueAccessor {
  @ViewChild(DefaultValueAccessor) private 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);
  }
}

The ngDefaultControl in the template above is to manually trigger angular to attach its normal DefaultValueAccessor to the input. This happens automatically if you use <input ngModel>, but we don’t want the ngModel here, just the value accessor. You’ll need to change DefaultValueAccessor above to whatever the value accessor is for the material dropdown – I’m not familiar with Material myself.

Leave a Comment Cancel reply