I am currently working on creating a wrapper for Angular Material Select. I am trying to find out how to transfer the FormControl from the Inner Component (Material dropdown select) to an external Parent Component Formbuilder. I am exploring different syntaxes and hoping to avoid using ControlValueAccessor if possible.
Child Material Dropdown Select:
TS:
@Input() formControlInput = new FormControl('',[Validators.min(1)]])
HTML:
<div class="dropdown-cont">
<mat-form-field appearance="outline">
<mat-label>{{label}}</mat-label>
<mat-select
[formControl]="formControlInput" // This is where it needs to go
[(ngModel)]="selectedItem"
(selectionChange)="selectedItemChanged($event)"
>
<mat-option [value]="defaultItem[txtValue]">{{defaultItem[txtField]}}</mat-option>
<mat-option
*ngFor="let item of listItems"
[value]="item[txtValue]"
>
{{item[txtField]}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
Parent Component:
this.outerForm = this.formBuilder.group({
'customerName':[null,[Validators.maxLength(50)]],
'customerPhone': [null, [Validators.maxLength(15)]],
'formControlInput': [null,[Validators.required]], // <--- Need this from inner component
How can I pass the FormControl from the child Material dropdown select in the inner component to the external formBuilder in the parent component?