Question

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

登录组件

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); 
    }
}

page.html中

<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>

例外

EXCEPTION：未捕获（承诺）：错误：./LoginComponent错误 class LoginComponent - 内联模板：13：45由：无值表单控件的访问者，名称为：＆＃39; email＆＃39; .....

Answer 1

您要将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>

同时更新其他输入字段。

Answer 2

对于具有角度材质的UnitTest角度，您必须在导入部分添加MatSelectModule模块。

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

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

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

Answer 3

如果遇到此问题，则可以

formControlName不在值访问器元素上。
或者您不为该元素导入模块。

Answer 4

如果必须将标签用于formControl。像蚂蚁设计复选框。运行测试时可能会引发此错误。您可以使用ngDefaultControl

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

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

Answer 5

就我而言，我使用的是离子，我试图用茉莉花业力对离子输入进行单元测试。运行测试时，我在 karma 浏览器中收到无值访问器错误。所以我只是将 ngDefaultControl 添加到离子输入中，它解决了问题。

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

Answer 6

在我的情况下，我使用带有contenteditable元素的Angular表单，例如div，之前遇到过类似的问题。

我写了ng-contenteditable模块来解决这个问题。

Answer 7

对于在角度9 +

中遇到此问题的任何人

如果您不声明或导入声明您的组件的组件，也会遇到此问题。

让我们考虑一种情况，您打算使用import React, { Component } from "react"; import { Container, Col, Form, FormGroup, Label, Input, Button, Dropdown } from "reactstrap"; import Axios from "axios"; import Table from "./Table"; class App extends Component { constructor (props) { super(props); this.state = { displayTable: false }; } render () { return ( <div> <div className="box"> <div className="element sourcedropdown"> <label>Source :</label> <select className="form-control" name="Sources" onChange={this.handleChange} > <option selected>Select Source</option> <option value="1">src1</option> <option value="2">src2</option> <option value="3">src3</option> </select> </div> <div className="element Techdropdown"> <label>Technology :</label> <select className="form-control" name="Tech" onChange={this.handleChange} > <option selected>Select Technology</option> <option className="dropdown-item" value="1"> tech1 </option> <option className="dropdown-item" value="2"> tech2 </option> <option className="dropdown-item" value="3"> tech3 </option> </select> </div> <div id="contrat" className="element contrat"> <label>Contract :</label> <select className="form-control" name="Tech" onChange={this.handleChange} > <option selected>Select contract</option> <option className="dropdown-item" value="1"> V1 </option> <option className="dropdown-item" value="2"> V2 </option> <option className="dropdown-item" value="3"> V3 </option> <option className="dropdown-item" value="3"> V4 </option> </select> </div> <div id="checkbox" className="element checkbox"> <label check> <input type="checkbox" onChange={this.handleChange} /> Remote </label> </div> <Button className="button" onClick={() => { this.setState({ displayTable: true }); }} > Submit </Button> </div> {this.state.displayTable ? <Table /> : ""} </div> ); } } export default App;但忘记导入它，Angular会抛出错误“无值访问器...”

我在Below stackblitz demo中重现了此错误。

Answer 8

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

Answer 9

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

Answer 10

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

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

}

就我而言，在自定义控件（可重用）组件的构造函数中添加这一行

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

Answer 11

对我来说，我在 angular 应用程序中使用了primeng 下拉菜单。下拉模块未导入。

没有用于表单控件的值访问器

11 个答案: