ngModel 在与 formControlName 相同的表单字段上

Posted 2023-03-13

【中文标题】ngModel 在与 formControlName 相同的表单字段上

【英文标题】：ngModel on the same form field as formControlName

【发布时间】：2019-07-08 14:25:54

【问题描述】：

我曾经有一个没有任何验证的简单表单，其 html 大致如下所示：

<mat-form-field>
        <input matInput
               type="text"
               placeholder="TaskName"
               [(ngModel)]="todoListService.toDoData.taskName"
               formControlName="taskName"
               required
               required>
               [(ngModel)]="todoListService.toDoData.taskName"
        >
    </mat-form-field>

然后我将我的表单移动到响应式表单并收到警告说我不能将 ngModel 放在与 formControlname 相同的字段上。苦苦思索我应该如何将表单中的数据分配给服务的输入字段。

HTML 的当前部分：

<form [formGroup]="todoForm">
    <mat-form-field>
        <input matInput
               placeholder="TaskName"
               formControlName="taskName"
               required
               [(ngModel)]="todoListService.toDoData.taskName"
        >
    </mat-form-field>

所以我删除了 ngModel 行并将其添加到我的 TS：

saveToDo() 
        this.dialogRef.close();
        this.todoListService.toDoData.taskName = this.todoForm.get('taskName');
        this.todoListService.toDoData.dueDate = this.todoForm.get('dueDate');
        this.todoListService.toDoData.extraNote = this.todoForm.get('extraNote');
        this.todoListService.addToDo();
    

我从中得到的错误是：

ERROR in src/app/new-to-do-dialog/new-to-do-dialog.component.ts(31,9): error TS2322: Type 'AbstractControl' is not assignable to type 'string'.
src/app/new-to-do-dialog/new-to-do-dialog.component.ts(32,9): error TS2322: Type 'AbstractControl' is not assignable to type 'DateConstructor'.
  Property 'prototype' is missing in type 'AbstractControl'.
src/app/new-to-do-dialog/new-to-do-dialog.component.ts(33,9): error TS2322: Type 'AbstractControl' is not assignable to type 'string'.

显然，我误解了有关从表单访问数据的一些内容。

我一直在关注这个指南和这个例子：

https://angular.io/api/forms/FormControlName#use-with-ngmodel https://stackblitz.com/edit/example-angular-material-reactive-form

感谢您的帮助！

【问题讨论】：

我认为如果您使用的是响应式表单，应该删除 name 属性

与 (NgModel) 和所需的指令相同。它们必须在 formGroup 中声明

【参考方案1】：

从 Angular 7 起，您不能同时使用 formControlName 和 ngModel。如果你想使用模板驱动的表单，你可以使用 ngModel，如果你想使用反应式表单，你就不能使用 ngModel。 （简单）

因为您决定采用反应式表单方法：

在 HTML 中：

<input type="text" (change)="onChangeCode($event.target.value)" formControlName="code" id="txtCode">

在 TS 中：

selectedCode: string = "";

onChangeCode(code: string) 
   this.selectedCode = code;

【参考方案2】：

这里 this.todoForm.get('controlname') 返回 AbstractControl 对象，因此可以从下面的对象中访问值

saveToDo() 
        this.dialogRef.close();
        this.todoListService.toDoData.taskName = this.todoForm.get('taskName').value;
        this.todoListService.toDoData.dueDate = this.todoForm.get('dueDate').value;
        this.todoListService.toDoData.extraNote = this.todoForm.get('extraNote').value;
        this.todoListService.addToDo();
    

希望这会有所帮助！

【讨论】：

你也可以使用this.todoForm.value，或者this.todoForm.controls.tasjName.value，例如：this.todo.ListService,toDoData=this.todoForm.value

【参考方案3】：

从 html 文件中移除 [(ngModel)]。

然后将以下内容添加到您的 ts 文件中

    this.todoForm.patchValue(
      taskName: this.todoListService.toDoData.taskName
    );