没有用于窗体控件的值访问器

我正在使用 Angular2-rc5，当前在我的登录页面上出现了一个错误。我试图创建一个表单，但是控制台抛出异常，告诉我它无法找到我的 formcontroll，即使我在 init 上创建它。知道为什么我会得到这个错误吗？

登录组件

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import { LoginService } from './login.service';
import { User } from '../../models/user';
    

@Component({
selector: 'login',
providers: [LoginService],
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
private loginForm: FormGroup; // our model driven form
private submitted: boolean; // keep track on whether form is submitted
private events: any[] = []; // use later to display form changes
    

constructor(private fb: FormBuilder, private ls:LoginService){}
ngOnInit(){
this.loginForm = new FormGroup({
email: new FormControl('',[<any>Validators.required]),
password: new FormControl('', [<any>Validators.required, <any>Validators.minLength(6)]),
rememberMe: new FormControl()
});
}
save(model: User, isValid: boolean) {
console.log("Test");
console.log(model, isValid);
}
// Login in user
login(email: any, password: any){
this.ls.login(email, password, false);
}
}

翻译: 奇芳

<div id="login-page">
<div class="form-wrapper">
<form class="login-form" [formGroup]="loginForm" novalidate (ngSubmit)="save(loginForm.value, loginForm.valid)">
<div >
<div class="input-field col s12 center">
<p class="center login-form-text">Login page</p>
</div>
</div>
<div >
<div class="input-field col s12">
<input id="email" type="email">
<label class="center-align" for="email" formControlName="email">Email</label>
</div>
</div>
<div >
<div class="input-field col s12">
<input id="password" type="password">
<label class="center" for="password" formControlName="password">Password</label>
</div>
</div>
<div >
<div class="input-field col s12 m12 l12 login-text">
<input id="remember-me" type="checkbox" formControlName="rememberMe">
<label for="remember-me">Remember me</label>
</div>
</div>
<div >
<div class="input-field col s12">
<ahref="index.html">Login</a>
</div>
</div>
<div >
<div >
<p><a href="page-register.html">Register Now!</a></p>
</div>
<div >
<p><a href="page-forgot-password.html">Forgot password ?</a></p>
</div>
</div>
</form>
</div>
</div>

例外

异常: 未捕获(在承诺中) : 错误: ./LoginComponent 中的错误 类 LoginComponent-inline template: 13:45由: No value 引起 表单控件的访问器，名称为: ‘ em ail’... ..。

261671 次浏览
小开
最佳答案

将 formControlName添加到标签而不是输入。

你有这个:

<div >
<div class="input-field col s12">
<input id="email" type="email">
<label class="center-align" for="email" formControlName="email">Email</label>
</div>
</div>

试着用这个:

<div >
<div class="input-field col s12">
<input id="email" type="email" formControlName="email">
<label class="center-align" for="email">Email</label>
</div>
</div>

同时更新其他输入字段。

小开

在我的案例中，我使用角形与 contenteditable元素像 div和以前有类似的问题。

我编写了 知足常乐模块来解决这个问题。

小开

对于角材质 的 UnitTest angle 2，必须在导入部分添加 MatSelectModule 模块。

import { MatSelectModule } from '@angular/material';


beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CreateUserComponent ],
imports : [ReactiveFormsModule,
MatSelectModule,
MatAutocompleteModule,......


],
providers: [.........]
})
.compileComponents();
}));
小开

如果你得到这个问题，那么,

  • FormControlName 不在 value 访问器元素上。
  • 或者不导入该元素的模块。
小开

如果必须使用 formControl的标签。就像蚂蚁设计复选框。它可能在运行测试时抛出此错误。你可以使用 ngDefaultControl

<label nz-checkbox formControlName="isEnabled" ngDefaultControl>
Hello
</label>


<nz-switch nzSize="small" formControlName="mandatory" ngDefaultControl></nz-switch>
小开

enter image description here

enter image description here

您可以在标签中看到 formControlName，删除它解决了我的问题

小开

对于任何人在 角9 + 经历这一点

如果不声明组件或导入声明组件的模块，也可能出现此问题。

让我们考虑这样一种情况: 你打算使用 ng-select，但是你忘了导入它，Angular 会抛出错误‘ No value accessor...’

我在 下面是 stackblitz 演示中复制了这个错误。

小开

在我的情况下，我使用离子，我试图单元测试离子输入与茉莉因果报应。 在运行测试时，我在 Karma 浏览器中得到了无值访问器错误。所以我把 ngDefaultControl加到离子输入上它解决了这个问题。

<ion-input class="password" [(ngModel)]="user.password" name="password"
type="password" #pw="ngModel" required ngDefaultControl>
</ion-input>
小开

对我来说，我有错误的离子日期选择器只，我必须导入 IonicModule到我的延迟加载模块

小开 
    constructor(
private cdr: ChangeDetectorRef,
@Optional()
@Self() public ngControl: NgControl,
) {


if (ngControl) {
ngControl.valueAccessor = this;
}


}

在我的示例中，将此行添加到自定义 Control (可重用)组件的构造函数中

if (ngControl) {
ngControl.valueAccessor = this;
}
小开

对我来说，我在角度应用程序中使用了启蒙下拉菜单。 没有导入用于下拉的模块。

小开

或者

您需要将 formControlName="controlName"移动到 <mat-radio-group>包装器，而不是将其绑定到单个 <mat-radio-button>元素

小开

在某些情况下，您可能会错过在可重用组件中添加 NG_VALUE_ACCESSOR作为提供程序。

@Component({
selector: 'app-reusable',
templateUrl: './reusable.component.html',
styleUrls: ['./reusable.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ReusableComponent),
multi: true,
},
],
})

提交答案