Как мне создать компонент, который содержит поле формы мата и ввод?

Я работаю над проектом, в котором используется много вложенных реактивных форм, и я хочу создать элемент управления, который оборачивает как поле Mat-Form-Field, так и ввод в один компонент, но когда я пробую это в своей форме, я продолжаю получать ошибки .

Я думаю, проблема в том, что элемент управления находится в массиве, поскольку он работает сам по себе.

В настоящее время с приведенным ниже кодом я получаю следующее сообщение об ошибке BasicInputComponent.html:2 ERROR Error: Не удается найти элемент управления с именем: 'firstName'

Я также пытался использовать ControlValueAccessor, но я не уверен, что это правильный способ ведения дел, и когда я попробовал, я не смог заставить мат-из-поля распознать, что он недействителен.

Я понимаю, что пример довольно простой, но мне действительно нужно, чтобы элемент управления можно было использовать в массивах форм, чтобы я мог использовать его в других местах в системе.

HTML-код дочернего компонента:

<mat-form-field floatLabel = "never" class = "ng-untouched ng-pristine ng-invalid">
    <input matInput #input [placeholder] = "placeholder" [type] = "type" [attr.maxlength] = "maxlength" type = "text" [formControlName] = "controlName"/>
    <mat-hint *ngIf = "maxlength" align = "end">{{input.value?.length || 0}}/{{maxlength}}</mat-hint>
</mat-form-field>

Дочерний компонент ts

@Component({
    selector: 'app-basic-input',
    templateUrl: './basic-input.component.html',
    styleUrls: ['./basic-input.component.css'],
    viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class BasicInputComponent { 

    @Input() placeholder: string;
    @Input() controlName: string;
    @Input() maxlength: number | null;

    constructor() {}
}

Родительский html:

<form [formGroup] = "vehicle">
    <div formArrayName = "occupants" *ngFor = "let occupant of vehicle.get('occupants')['controls']; let i = index;">
        <div [formGroupName] = "i">
              <app-basic-input placeholder = "First Name" controlName = "firstName" maxlength = "25"></app-basic-input>
        </div>
    </div>
</form>

Родитель ТС:

    vehicle= this.fb.group({
        occupants: this.fb.array([
            this.fb.group({
                firstName: ['', Validators.required],
                lastName: ['', Validators.required]
            })
        ])
    })