Angular 14 Custom Form Control not rendering

Question

I'm trying to create a custom form control in Angular 14 and it's not rendering. There's no errors in the console so I have no clue as to what's going wrong. When I look in the Elements tab in the console I see the parent component I'm creating the form in but not any of the content or the custom control. The way I have it set up goes as follows.

interfaces.ts

export type MediaTypeParams = 'all' | 'screen' | 'print';

export interface MediaExpressionGroupParams{
  property: FormControl<string>;
  value: FormControl<string>;
}

export interface MediaSelectorParams{
  mediaType: FormControl<MediaTypeParams>;
  expressions: FormArray<FormGroup<MediaExpressionGroupParams>>;
}

export interface MediaQueryParams{
  selectorParams: FormGroup<MediaSelectorParams>;
  rules: FormControl<string>;
}

export interface StylingParams{
  globalStyles: FormControl<string>;
  mediaQueries: FormArray<FormGroup<MediaQueryParams>>;
}

export interface ViewBoxParams{
  x: FormControl<string>;
  y: FormControl<string>;
  width: FormControl<string>;
  height: FormControl<string>;
}

export interface SvgForm{
  title: FormControl<string>;
  graphicId: FormControl<string>;
  svgInput: FormControl<string>;
  viewBox: FormGroup<ViewBoxParams>;
  styling: FormGroup<StylingParams>;
}

SvgParser.component.ts

@Component({
  selector: 'svg-parser',
  templateUrl: './svg-parser.component.html',
  styleUrls: ['./svg-parser.component.css'],
})
export class SvgParserComponent{

  SvgForm : FormGroup<SvgForm> = new FormGroup<SvgForm>({
    title: new FormControl<string>(''),
    graphicId: new FormControl<string>(''),
    svgInput : new FormControl<string>(''),
    viewBox : new FormGroup<ViewBoxParams>({
      x: new FormControl<string>(''),
      y: new FormControl<string>(''),
      width: new FormControl<string>(''),
      height: new FormControl<string>('')
    }),
    styling: new FormGroup<StylingParams>({
      globalStyles: new FormControl<string>(''),
      mediaQueries: new FormArray<FormGroup<MediaQueryParams>>([])
    })
  });

  constructor(){}

  createMediaQueryExpressionGroup(): FormGroup<MediaExpressionGroupParams> {

    return new FormGroup<MediaExpressionGroupParams>({
      property: new FormControl<string>(''),
      value: new FormControl<string>('')
    });

  }



  createMediaQueryGroup(): FormGroup<MediaQueryParams> {

    return new FormGroup<MediaQueryParams>({
      selectorParams: new FormGroup<MediaSelectorParams>({
        mediaType: new FormControl<MediaTypeParams>('all'),
        expressions: new FormArray<FormGroup<MediaExpressionGroupParams>>([]),
      }),
      rules: new FormControl<string>('')
    });
  }

public submitForm(){}

}

CodeInput.component.ts

@Component({
  selector: 'code-input',
  templateUrl: './code-input.component.html',
  styleUrls: ['./code-input.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting : CodeInputComponent,
      multi: true
    }
  ]
})
export class CodeInputComponent implements ControlValueAccessor{

  field : string = '';

  onChange : any = () =>{};
  onTouch : any = () => {};

  set value(val : string){
    this.field = val;
    this.onChange(val);
    this.onTouch(val);
  }

  writeValue(value: any){ this.value = value; }

  registerOnChange(fn: any){ this.onChange = fn; }

  registerOnTouched(onTouched: Function){ this.onTouch = onTouched; }

}

SvgParser.component.html

<form [formGroup]="SvgForm" (ngSubmit)="submitForm()">
  <p>svg parser</p>
  <code-input formControlName="svgInput"></code-input>
  <button type="submit">submit</button>
</form>

CodeInput.component.html

<textarea class="srcryBox codeInput" formControlName="value" placeholder="paste code here"></textarea>

I've gone back and forth using [(ngModel)] instead of formControlName in both components with the only difference being when used in the SvgParser component I get an error telling me the svgInput property doesn't exist on the component. I changed it to [(ngModel)]="SvgForm.value.svgInput" just to see if that would make a difference and it goes back to not rendering anything without any errors.

A lot of the info I'm finding about creating custom form controls and using ControlValueAccessor were made prior to the release of Angular 14 so I'm guessing there's something with the new strict typed forms that requires some additional configuring that I'm just not coming across or know of by name to search. Does anybody know what's happening here?

Answer 1

I tried your code but I didn't find any problems with the typings just some small changes I made in the codeInputCompenent, here's a working link

CodeInput.component.html

<textarea class="srcryBox codeInput" [(ngModel)] = "value" placeholder="paste code here"></textarea>