Currently, I am in the process of developing a reusable input component using Angular 9 along with material design. My goal is to create something similar to the illustration provided below.
https://i.sstatic.net/N1tCy.png
TextboxComponent.html
<mat-form-field appearance="fill">
<mat-label>Input</mat-label>
<input matInput formControlName = {{imeta.formControlName}}>
</mat-form-field>
TextboxComponent.ts
@Component({
selector: 'app-textbox',
templateUrl: './textbox.component.html',
styleUrls: ['./textbox.component.scss']
})
export class TextboxComponent implements OnInit {
@Input()imeta : IMeta
constructor() { }
ngOnInit(): void {}
}
export class IMeta {
component: ComponentType;
formControlName : string = null;
}
export enum ComponentType {
TextBox = 0,
TextArea = 1,
RadioButton = 2,
Checkbox = 3,
Select = 4
}
This component is designed to be configurable and serves as a bridge between different elements.
reactive-base-inputs.component.html
<ng-container [ngSwitch]="imeta.component">
<ng-template [ngSwitchCase]="componentType.TextBox">
<app-textbox [imeta]="imeta"></app-textbox>
</ng-template>
</ng-container>
@Component({
selector: 'reactive-inputs',
templateUrl: './reactive-base-inputs.component.html',
styleUrls: ['./reactive-base-inputs.component.scss']
})
export class ReactiveBaseInputsComponent implements OnInit {
@Input() imeta : IMeta;
componentType = ComponentType
constructor() { }
ngOnInit(): void {}
}
This is where I have implemented my input component.
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<reactive-inputs [imeta]="configuration"></reactive-inputs>
</form>
I am currently experiencing difficulties with setting and accessing the formControlName. Any suggestions on how I can effectively set a formControlName and access the parent component?