- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我曾经有一个没有任何验证的简单表单,其中 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。 (简单)
当您决定采用响应式表单方法时:
<input type="text" (change)="onChangeCode($event.target.value)" formControlName="code" id="txtCode">
selectedCode: string = "";
onChangeCode(code: string) {
this.selectedCode = code;
}
关于angular - ngModel 在与 formControlName 相同的表单字段上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54692460/
我正在尝试来自官方 Angular 响应式(Reactive)表单验证 doc 。我在渲染 formControlName 时遇到问题。它给出了用户名未定义的错误这里有一个错误 Error: Unca
我创建了 form: FormGroup 变量,我在服务的构造函数中使用 FormArray localizationData: FormArray 定义了组: this.form = this.fo
我正在使用响应式控件构建动态表单,我需要能够显示数据而不是在输入控件中使用它。我基本上有一个开关,可以在基于输入和只读(用于打印)之间切换表单。但是,我不能将 label 或 span 与 formC
我想创建一个自定义输入组件并在我的表单中重用它,但我遇到了 formGroup 和 formControlName 的问题。 // Form // CustomInput Component
在括号内使用 formControlName 和不在括号内有什么区别?在动态表单教程中 formcontrolname 被用在方括号内 [formControlName]="dyncontrol.ke
我在 Mat-Autocomplete 上使用 formControlName 时遇到问题。 我不知道为什么,但我的 formControlName 不会发送数据,是我写错了吗? 当我尝试从 HTML
我想创建一个可以与 FormBuilder API 一起使用的自定义输入组件。如何在组件中添加 formControlName? 模板: {{ label }}
新: 所以我可以让它在没有 radio 组或没有正确绑定(bind)的情况下工作。我无法让它与两者一起工作。 这是允许的:
我正在使用 mat-select ,我需要为它设置默认值。它有效,但在向其添加 formControlName 后,不显示其默认值。 我试过 [(ngModel)] 和 [(value)] ,以及“m
在创建模型驱动表单时,我收到一个错误:错误:formControlName 必须与父 formGroup 指令一起使用。您需要添加一个 formGroup 指令并将其传递给现有的 FormGroup
我想通过实现 ControlValueAccessor 创建自定义表单元素地址。 我正在尝试创建一个 AddressComponent,其中有多个输入字段。我想在如下所示的 react 形式中使用此组
我想通过实现 ControlValueAccessor 创建自定义表单元素地址。 我正在尝试创建一个 AddressComponent,其中有多个输入字段。我想在如下所示的 react 形式中使用此组
我正在通过 angularjs2 中的表单生成器制作表单,我想添加表单元素的 formControlName 属性/属性,如下所示: 我该怎么做? 编辑: 我还想将有效性消息放在输入元素旁边,
如何将 formControlName 映射到特定的 formArray 项? 我无法控制服务器数据并尝试创建一个包含电话号码数组的表单。 表单本身在视觉上并没有将手机并排布置,我希望能够像通常使用
我曾经有一个没有任何验证的简单表单,其中 HTML 大致如下所示: [(ngModel)]="todoListService.toDoData.tas
我希望将数字管道添加到 Angular2 中的输入字段。我正在使用模型驱动的表单,我的所有输入都有一个 formControlName 而不是使用数据绑定(bind)。我遇到的问题是 formCont
我正在使用基于模型的表单,我的表单如下所示: Submit 我想写一个 Protractor 规范来测试登录。我喜欢在我的规范中做类似下面的事情: element(by.f
哦,angular2...为什么这么难? {{exposure}} 如果我在输入中使用 formControlName,则值是正确的。 如何获取模板中的曝光值?标签中的空白 最佳答案 The for
作为 Angular documentation说我们可以在表单中使用 formControlName: Hero Detail FormControl in a FormGroup
我正在使用 Angular2 的 ReactiveFormsModule 创建一个包含表单的组件。这是我的代码: foo.component.ts: constructor(fb: FormBuild
我是一名优秀的程序员,十分优秀!