ngModelOptions 从 Angular 模板驱动表单中删除表单控制

Question

我有一个只有 1 个可编辑字段（日期字段）的网格，我想在其中添加一些验证逻辑（用户不能输入随机字符串等）。我正在使用

template driven form

以便我可以使用

<mat-error>

向用户显示实际错误。

现在，我遇到了一个问题，即日期字段（截止日期）没有绑定到从服务器获取的数据，尽管其他列（请注意，我没有将其他列作为表单控件）。添加

[ngModelOptions]="{standalone: true}"

时，数据绑定问题已修复，但控件不再添加到表单中。下面语句的控制台日志记录显示我为空，而不是未添加

ngModelOptions

时：

因此，我不能再使用我的验证逻辑，因为（据我所知）它与表单控件结合在一起。

我在这里做错了什么，可以做些什么来补救？ 我的代码片段相同：

<form #myForm="ngForm">
 <mat-table matSort [dataSource]="dataSource" #table>
          <ng-container matColumnDef="col1">....</ng-container>
          <ng-container matColumnDef="col2">....</ng-container> 
           .....
           <ng-container class="form-group" matColumnDef="dueDate">
            <mat-header-cell *matHeaderCellDef mat-sort-header="dueDate">
              <div>
                <div style="display: flex; align-items: center; cursor: pointer">
                  Due Date
                </div>
              </div>
            </mat-header-cell>
            <mat-cell *matCellDef="let element;">
                <mat-form-field appearance="fill" style="width:100px"> 
                  <mat-label>Choose Due Date</mat-label>
                  <input matInput type="text" [matDatepicker]="picker1" 
                        name="dueDate" #dueDate="ngModel"
                        class="form-control" [(ngModel)]="element.dueDate" 
                        autocomplete="off" (ngModelChange)="onDueDateChanges($event, element)" 
                        [ngModelOptions]="{standalone: true}" [matDatepicker]="picker1"> 
                  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle> 
                  <mat-datepicker #picker1></mat-datepicker>   
                </mat-form-field>
            </mat-cell>
       </ng-container>
       ......
   </mat-table>
</form>