ngModel 在与 formControlName 相同的表单字段上 [英] ngModel on the same form field as formControlName

问题描述

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

I used to have a simple form without any validation where the HTML roughly looked like this:

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

然后我将我的表单移动到响应式表单并收到警告，我不能在与 formControlname 相同的字段上使用 ngModel.纠结于我应该如何将表单中的数据分配到服务的输入字段.

I then moved my form to reactive forms and received the warning that I can't have ngModel on the same field as formControlname. Struggling how I'm supposed to assign the data from the form to the input field of the service.

HTMl 的当前部分:

Current section of HTMl:

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

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

So I removed the ngModel line and added this to my 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'.

显然，我对从表单访问数据有一些误解.

Apparently, I misunderstood something about accessing data from the form.

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

I have been following this guide and this example:

https://angular.io/api/forms/FormControlName#use-with-ngmodelhttps://stackblitz.com/edit/example-angular-material-reactive-表格

感谢您的帮助！

推荐答案

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

Here this.todoForm.get('controlname') returns the AbstractControl Object so access the value from object like below

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();
    }

希望这会有所帮助！

这篇关于ngModel 在与 formControlName 相同的表单字段上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！