Angular 如何消除'；表单控件的无值访问器'；以模板驱动角度形式
我正在使用官方发布的文档示例代码 虽然我发现在不使用ngModelGroup指令的情况下仍然存在这个问题 form.component.tsAngular 如何消除'；表单控件的无值访问器'；以模板驱动角度形式,angular,Angular,我正在使用官方发布的文档示例代码 虽然我发现在不使用ngModelGroup指令的情况下仍然存在这个问题 form.component.ts import {Component} from '@angular/core'; import {NgForm} from '@angular/forms'; @Component({ selector: 'example-app', template: ` <form #f="ngForm" (ngSubmit)="onSubmit(f)"&
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'}; }
}
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 { }
@angular/language service:4.3.6如果要在自定义组件中使用NgForm、NgModel和其他类似的东西，则需要将FormsModule导入声明组件的NgModule中。顺便说一句，您的链接提供了您需要导入的模块名（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 { }
从'@angular/platform browser'导入{BrowserModule}；
从“@angular/core”导入{NgModule}；
从'@angular/forms'导入{FormsModule}；
从“./app.component”导入{AppComponent}；
从“./form/form.component”导入{FormComponent}；
@NGD模块({
声明：[
应用组件，
FormComponent
],
进口：[
浏览器模块，
FormsModule/将FormsModule添加到app.module.ts中的导入数组解决了以下问题：
imports: [
BrowserModule,
FormsModule // <-- this is what you need to do
],
导入：[
浏览器模块，
FormsModule//我刚刚从引用文档中复制了代码，并将其粘贴到一个Plunker中，它似乎工作正常。Plunker在这里：是否可能错误在代码中的其他地方？您是否更新了此组件和FormsModule的ngModule
模块？@DeborahK我已经更新了问题所有相关文件。你放在plunker中的HTML与我的编译器生成的完全不同。你的HTML没有Javascript包。-thxI不明白吗？我只是使用plunker的标准角度模板，然后按照你说的那样粘贴文档中的代码？是的，这很有效。非常感谢。不知道为什么要编译它如果没有实现接口。另外，如果控制台日志像您所说的那样是自解释的，您会受益。没有任何地方提到ControlValueAccesor或未实现。它说表单没有“值访问器”。@DeborahK Deborah，我所有的Angular index.html文件在脚本标记@arod中都有这种格式，只是为了清楚-缺乏实现触发此错误的不是此接口的类型。触发此错误的是缺少NG_值访问器的提供程序。