I'm facing an issue while attempting to develop a custom form control in Angular 14. Despite no errors showing up in the console, my custom control is not rendering as expected. When inspecting the Elements tab in the console, I can see the parent component where the form is created, but none of its content or the custom control itself. The structure is set up as follows.
interfaces.ts
export type MediaTypeParams = 'all' | 'screen' | 'print';
... (content omitted for brevity)
SvgParser.component.ts
@Component({
selector: 'svg-parser',
templateUrl: './svg-parser.component.html',
styleUrls: ['./svg-parser.component.css'],
})
export class SvgParserComponent{
... (content omitted for brevity)
}
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
}
]
})
... (content omitted for brevity)
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>