Как динамически создавать шаблонные формы ввода в угловых

Question

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

schemaAttributes = [{"key":"phone", "type":"string", "required":true},
               {"key":"email" "type":"string", "required":false},
               {"key":"registration" "type":"bool", "required":true}];

, поэтому я хочу создать поля ввода в форме, имеющей formControlName = schemaAttributes.key;

в HTML, я попробовал вот так.

<div class="row">

     <div *ngFor="let schemaAttribute of schemaAttributes">


        <div class="input-field"
    [ngClass]="[ schemaAttribute.characters >= 19 ? 'col m12':  'col 
       m6' ]">


    <div
      *ngIf="schemaAttribute.type == 'url' || (schemaAttribute.type 
  == 'string' && !schemaAttribute.characters) || 
   (schemaAttribute.type 
   == 'string' && schemaAttribute.characters <= 18) || 
 schemaAttribute.type == 'number' || schemaAttribute.type == 'email' 
     || 
  schemaAttribute.type == 'phone' ">
      <div class="lbl">{{schemaAttribute.label}}</div>
      <mat-form-field class="field" appearance="outline">
        <input [formControl]="schemaAttribute.key" matInput>
      </mat-form-field>
    </div>


    <div
      *ngIf="schemaAttribute.type == 'string' && 
      schemaAttribute.characters >= 19">
      <div class="lbl">{{schemaAttribute.label}}</div>
      <mat-form-field  appearance="outline">
        <textarea [formControl]="schemaAttribute.key" matInput> 
   </textarea>
      </mat-form-field>
    </div>


    <div *ngIf="schemaAttribute.type == 'date'">
      <div class="lbl">{{schemaAttribute.label}}</div>
      <mat-form-field class="field" appearance="outline">
        <input [formControl]="schemaAttribute.key" matInput 
        [matDatepicker]="picker" placeholder=" 

    {{_callService.translationsObj?.CREATE_CUSTOMER_CLASS.
      CHOOSE_DATE_FROM_ 
  ICON}}">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat- 
         datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
    </div>

    <div *ngIf="schemaAttribute.type == 'date_time'">
      <div class="lbl">{{schemaAttribute.label}}</div>
      <mat-form-field class="field" appearance="outline">
        <input [formControl]="schemaAttribute.key" matInput 
      [owlDateTime]="dt1" [owlDateTimeTrigger]="dt1" placeholder=" 

      {{_callService.translationsObj?.
     CREATE_CUSTOMER_CLASS.ADD_DATE_TIME}}">
        <owl-date-time #dt1></owl-date-time>
        <mat-icon matSuffix>today</mat-icon>
      </mat-form-field>
    </div>

    <div *ngIf="schemaAttribute.type == 'time'">
      <div class="lbl">{{schemaAttribute.label}}</div>
      <mat-form-field class="field" appearance="outline">
        <input [formControl]="schemaAttribute.key" matInput 
     placeholder=" 
   {{_callService.translationsObj?.CREATE_CUSTOMER_CLASS.ADD_TIME}}" 
    [owlDateTimeTrigger]="dt2" [owlDateTime]="dt2">
        <owl-date-time [pickerType]="'timer'" #dt2></owl-date-time>
        <mat-icon matSuffix>access_time</mat-icon>
      </mat-form-field>
    </div>

    <div *ngIf="schemaAttribute.type == 'bool'" class=" check-box">
        <div class="lbl">{{schemaAttribute.label}}</div>
      <mat-checkbox [formControl]="schemaAttribute.key"></mat- 
       checkbox>
    </div>


    </div>


  </div>
 </div>

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