如何在angular

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>

但是我不知道如何用一些变量绑定这些输入字段，这些变量将捕获它们的值并验证表单。