Угловые динамические формы и угловой материал

Я создал компонент динамической формы в Angular 5 (на основе документации и примера из https://angular.io/guide/dynamic-form).

Все работает найду, пока не попробую использовать угловатый материал.

Я прочитал здесь несколько статей по аналогичным вопросам, но все они, похоже, связаны с тем, что люди не импортировали правильные модули или не использовали mdInput или mat-Input вместо matInput. Это не относится к проблеме, с которой я столкнулся.

Любые мысли или советы будут оценены.

ИЗМЕНЕН КОД - ПРЕРЫВАЕТСЯ, ОШИБКА -

* поле mat-form должно содержать MatFormFieldControl. ***

Шаблон компонента управления динамической формой

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

Я импортирую все модули материалов (MatFormFieldModule и MatInputModule и т. Д. Через основной модуль. Все мои материальные входные данные и поля форм работают во всех других компонентах приложения, поэтому я не верю, что проблема в том, что мне что-то не хватает в импорте. .

<div [formGroup]="form">

    <div [ngSwitch]="control.controlType">
        <mat-form-field>
            <input matInput placeholder="{{control.label}}" *ngSwitchCase="'textbox'" [formControlName]="control.key" [id]="control.key"
                [type]="control.type">
        </mat-form-field>
        <select [id]="control.label" *ngSwitchCase="'dropdown'" [formControlName]="control.key">
            <option value="">Select {{control.label}}</option>
            <option *ngFor="let opt of control.options" [value]="opt.key">{{opt.value}}</option>
        </select>
    </div>

    <div class="errorMessage" *ngIf="!isValid">{{control.label}} is required</div>
</div>

ТЕКУЩИЙ КОД - работает отлично, но я не получаю форматирование материала angular

Селектор

<mi-dynamic-form [controls]="controls"></mi-dynamic-form>

Компонент динамической формы

    import { Component, Input } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

import { DynamicFormBase } from './dynamic-form-base';

@Component({
    selector: 'mi-control',
    templateUrl: './dynamic-form-control.component.html'
})
export class DynamicFormControlComponent {

    // API
    @Input() control: DynamicFormBase<any>;
    @Input() form: FormGroup;

    get isValid() { return this.form.controls[this.control.key].valid; }
}

Шаблон компонента динамической формы

    <div [formGroup]="form">
    <div [ngSwitch]="control.controlType">
            <input  placeholder="{{control.label}}" *ngSwitchCase="'textbox'" [formControlName]="control.key" [id]="control.key"
                [type]="control.type">
        <select [id]="control.label" *ngSwitchCase="'dropdown'" [formControlName]="control.key">
            <option value="">Select {{control.label}}</option>
            <option *ngFor="let opt of control.options" [value]="opt.key">{{opt.value}}</option>
        </select>
    </div>

    <div class="errorMessage" *ngIf="!isValid">{{control.label}} is required</div>
</div>

Компонент управления динамической формой

import { Component, Input } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

import { DynamicFormBase } from './dynamic-form-base';

@Component({
    selector: 'mi-control',
    templateUrl: './dynamic-form-control.component.html'
})
export class DynamicFormControlComponent {

    // API
    @Input() control: DynamicFormBase<any>;
    @Input() form: FormGroup;

    get isValid() { return this.form.controls[this.control.key].valid; }
}

Шаблон компонента управления динамической формой

 <div [formGroup]="form">
        <!-- <label [attr.for]="control.key">{{control.label}}</label> -->

        <div [ngSwitch]="control.controlType">
            <mat-form-field>
                <input matInput placeholder="{{control.label}}" *ngSwitchCase="'textbox'" [formControlName]="key" [id]="control.key"
                    [type]="control.type">
            </mat-form-field>
            <mat-select [id]="control.label" *ngSwitchCase="'dropdown'" [formControlName]="control.key">
                <mat-option value="">Select {{control.label}}</mat-option>
                <mat-option *ngFor="let opt of control.options" [value]="opt.key">{{opt.value}}</mat-option>
            </mat-select>
        </div>

        <div class="errorMessage" *ngIf="!isValid">{{control.label}} is required</div>
    </div>