binded formControlName in component | optional usage

How can i set a formControlName in a subcomponent to optional? I will like to use ComponentA in ComponentB without a FormGroup but also in some other Components with Formgroup. Is there a possibility?

ComponentA

<app-quantity-counter
[value]="cartItem.amount"
[step]="1"
[min]="1"
[max]="1000"
(onCounterChange)="onQuantityChange($event, cartItem)"
controlName="amount"
></app-quantity-counter>


ComponentA_TS

viewProviders: [
{
provide: ControlContainer,
useExisting: FormGroupDirective,
},
],
export class QuantityCounterComponent implements OnInit {
@Input() controlName: string = null;
....


ComponentB

<div class="quantity-counter" [class.sm]="small">
<!-- <button type="button" (click)="decrement()"><mat-icon class="text-muted">indeterminate_check_box</mat-icon></button> -->
<button type="button" (click)="decrement()">
<mat-icon class="text-muted">keyboard_arrow_down</mat-icon>
</button>
<input
type="text"
[value]="value"
[(ngModel)]="value"
(blur)="onBlur()"
(keypress)="keyPress($event)"
[formControlName]="controlName"
/>
<button type="button" (click)="increment()">
<mat-icon class="text-muted">keyboard_arrow_up</mat-icon>
</button>
<!-- <button type="button" (click)="increment()"><mat-icon class="text-muted">add_box</mat-icon></button> -->
</div>

Continue reading...