gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 18:35:47 26 4
gpt4 key购买 nike

我曾经有一个没有任何验证的简单表单,其中 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>

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

当前的 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

感谢您的帮助!

最佳答案

从 Angular 7 开始,您不能同时使用 formControlName 和 ngModel。如果你想使用模板驱动的表单,你可以使用 ngModel,如果你想使用响应式(Reactive)表单,你不能使用 ngModel。 (简单)

当您决定采用响应式表单方法时:

在 HTML 中:

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

在 TS 中:

selectedCode: string = "";

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

关于angular - ngModel 在与 formControlName 相同的表单字段上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54692460/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com