在 Angular 中动态创建控件时不呈现 formControlName

Question

我正在努力创建一个表单，该表单将具有通过 API 提供的呈现控件。表单呈现没有任何问题。但是 formControlName 属性在呈现时从 HTML 中丢失。这会导致 mat-datepicker 出现问题。因为它需要 formControlName 与控件相关联

这是我的模板

      <div *ngFor="let item of list; let i=index;">
        <mat-form-field appearance="fill">
          <mat-label>{{item.control["Caption"]}}</mat-label>

          <input *ngIf="(item.control['Type'] == "Text")" matInput formControlName="{{item.key}}" >
          

          <input *ngIf="item.control['Type'] == 'Date'" matInput [matDatepicker]="i" placeholder="DD/MM/YYYY" [formControlName]="item.key"  >
          <mat-datepicker-toggle *ngIf="item.control['Type'] == 'Date'" matSuffix [for]="i"></mat-datepicker-toggle>
          <mat-datepicker *ngIf="item.control['Type'] == 'Date'" #i></mat-datepicker>


        </mat-form-field>

      </div>
    </form>

现在的问题是日期控件已呈现，但在单击控件上的日历图标时不会出现日历弹出窗口。但是，如果我在控件中手动输入日期，则它会正确提交。

我在这里错过了什么。我需要能够将 mat-datepicker 与呈现的所有日期控件绑定。

Answer 1

像这样更新您的模板：

<div *ngFor="let item of list; let i=index">
    
    <mat-form-field appearance="fill">
    
      <mat-label>{{item.control["Caption"]}}</mat-label>

      <input *ngIf="item.control['Type'] == 'Text'" matInput [formControlName]="item.key" >
      
      <ng-container *ngIf="item.control['Type'] == 'Date'">
        <input  matInput [matDatepicker]="i" placeholder="DD/MM/YYYY" [formControlName]="item.key"  >
        <mat-datepicker-toggle matSuffix [for]="i"></mat-datepicker-toggle>
        <mat-datepicker #i></mat-datepicker>
      </ng-container>

    </mat-form-field>

 </div>

这里我使用了ng-container因为它不会在DOM中添加额外的标签，你也可以在这里使用div但那样会在[=中添加新标签19=]。您可以检查元素并查看差异。您可以阅读更多关于 ng-container here

在 Angular 中动态创建控件时不呈现 formControlName

formControlName is not rendered when creating control dynamically in Angular

typescript

angular-directive

angular-material

angular