如何消除模板驱动Angular表单中的“表单控件无值访问器”

提问者：小点点

如何消除模板驱动Angular表单中的“表单控件无值访问器”

我在https://angular.io/api/forms/NgModelGroup使用官方发布的留档示例代码

虽然我发现我仍然有问题没有使用ngModelGroup指令

表单组件

import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';

@Component({
 selector: 'example-app',

template: `
<form #f="ngForm" (ngSubmit)="onSubmit(f)">
  <p *ngIf="nameCtrl.invalid">Name is invalid.</p>

  <div ngModelGroup="name" #nameCtrl="ngModelGroup">
    <input name="first" [ngModel]="name.first" minlength="2">
    <input name="last" [ngModel]="name.last" required>
  </div>

  <input name="email" ngModel> 
  <button>Submit</button>
</form>

<button (click)="setValue()">Set value</button>
`,
})
export class FormComponent {
name = {first: 'Nancy', last: 'Drew'};

onSubmit(f: NgForm) {
console.log(f.value);  // {name: {first: 'Nancy', last: 'Drew'}, email: ''}
console.log(f.valid);  // true
}

setValue() { this.name = {first: 'Bess', last: 'Marvin'}; }
}

app. module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgForm, NgModelGroup, NgModel } from '@angular/forms';
import { AppComponent } from './app.component';
import { FormComponent } from './form/form.component';


@NgModule({
declarations: [
AppComponent,
FormComponent,
NgForm,NgModelGroup,NgModel

],
imports: [
BrowserModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

应用程序组件. html<代码>

并在控制台收到此错误：未捕获（在promise中）：错误：

错误错误：未捕获（在Promise中）：错误：没有带有path：'name-的表单控件的值访问器

@角/cli：1.3.2

节点：6.11.0

os：win32 x64

@角度/动画：4.3.6

@角/公共：4.3.6

@角/编译器：4.3.6

@角/核心：4.3.6

@角度/形式：4.3.6

@角度/超文本传输协议：4.3.6

@角/平台浏览器：4.3.6

@角/平台浏览器动态：4.3.6

@角/路由器：4.3.6

@角/cli：1.3.2

@角/编译器-cli：4.3.6

@角/语言服务：4.3.6

共2个答案

匿名用户

如果您要在自定义组件中使用NgForm、NgModel和其他类似的东西，那么您需要将FormsModule导入到声明您的组件的NgModule中。BTW，您的链接提供了您需要导入的模块名称（FormsModule）。此外，您不需要单独声明指令NgForm、NgModelGroup和NgModel，因为它们已经在FormsModule中声明了。

因此，您的模块应该如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { FormComponent } from './form/form.component';

@NgModule({
    declarations: [
        AppComponent,
        FormComponent
    ],
    imports: [
        BrowserModule,
        FormsModule // <-- this is what you need to do
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

这个确切错误的解释

事实上，这个错误几乎是不言自明的。你需要提供实现ControlValueAccess接口的东西（在你的特定情况下将使用DefaultValueAccess），因为你放在输入上的NgModel需要它。实现ControlValueAccess的类实际上是在DOM元素中放置值并处理用户输入的类。这是对不同类型的DOM用户输入元素的角度抽象——单选按钮、复选框、文本输入和选择，仅举几例。因此，由于您没有给出任何实现此接口的东西（并使用NG_VALUE_ACCESSOR令牌提供上述实现），角度注入器抱怨由于这个原因它无法实例化NgModel。但是如果您导入FormsModule，那么您将立即获得所有这些东西，因为该模块提供了几个开箱即用的值访问器，而无需额外的声明。

匿名用户

将FormsModule添加到app. module.ts中的导入数组解决了这个问题：

imports: [
    BrowserModule,
    FormsModule // <-- this is what you need to do
],