@Component( {    selector: ''input-extra-field'',    template: `            <div[formGroup]="formGroup" >                <switch [attr.title]="field.etiquette"                     [attr.value]="field.valeur" [(ngModel)]="field.valeur"                    [formControl]="fieldControl" [attr.id]="name" [attr.disabled]="disabled">                </switch>                <error-messages [control]="name"></error-messages>            </div>    `} )

export class SwitchExtraField extends ExtraField {    @Input() field: ExtraFormField;    @Input() entity: { fields: Object };    @Input() formGroup: FormGroup;    constructor( formDir: NgForm ) {        super( null, null, formDir );    }    get disabled(): string {        if ( this.field && !!this.field.saisissable && !this.field.saisissable )     {            return ''disabled'';        }        return null;    }}

ERROR Error: No value accessor for form control with unspecified name attribute  at _throwError (forms.es5.js:1918)  at setUpControl (forms.es5.js:1828)  at FormControlDirective.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControlDirective.ngOnChanges (forms.es5.js:4617)

嗨,我正在使用表单生成器在角度2中实现一个表单

在component.ts中,我使用formGroup实现了我的表单

以下是我的代码

public myForm: FormGroup;

constructor(private authenticateservice: AuthenticateService,private _fb: FormBuilder
             ) {


}

ngOnInit() {

this.myForm = this._fb.group({
      address: [this.userDetails.address,[<any>Validators.required]],address2: ['',city: ['',company_address: ['',company_address2: ['',company_city: ['',company_country: ['',company: ['',[<any>Validators.required,Validators.minLength(3)] ],company_tax_number: ['',company_zip: ['',Validators.minLength(5),Validators.maxLength(7)]],country: ['',email: ['',Validators.email]],first_name: [this.userDetails.first_name,id: ['',last_name: ['',phone: ['',Validators.minLength(10)]],zip: ['',user_type: ['2',terms: [0,hash_tag: [''],});

}

它工作正常.但是在frontEnd中显示验证时

我这样用过

<div>
    <div>
      <label>Address 2</label>
      <textareaplaceholder="Address" rows="2" [readonly]="disabled" id="companyaddress2" formControlName="company_address2"></textarea>
      <span*ngIf="myForm.controls['company_address2'].hasError('required')">Company Address 2 is required.</span>
    </div>
  </div>

它正在工作,但在控制台中抛出错误,如下

错误TypeError：无法读取未定义的属性’hasError’

请帮我解释一下这个问题.

谢谢.

你应该像这样使用它：

<span*ngIf="myForm.controls['company_address2'].errors?.required &&
  myForm.controls['company_address2'].touched">Company Address 2 is required </span>

我用自定义元素将表单更新为RC2的@ angular / forms.当我使用[(ngModel)] =“myModel”对它执行输入绑定时,我从角度得到”没有值访问器,并且表单无法加载.只有输入绑定才会出现错误.

这是一个说明问题的吸收者：https://plnkr.co/edit/wxMsGuxr3GHMwNNoczT7?p=preview

值访问器通常正常工作(并且模型使用RC1中的旧表单),因为FormBuilder具有通过访问器接口正确设置的初始值.

该问题似乎与https://github.com/angular/angular/issues/7518类似,但表单指令在引导代码中提供：

provideForms(),{
    provide: PLATFORM_DIRECTIVES,useValue: [REACTIVE_FORM_DIRECTIVES],multi: true
}

您在调用bootstrap时缺少disableDeprecatedForms().见： https://plnkr.co/edit/tk1rWdmXB7umkGPYK4Ho?p=preview

我有这样简单的自定义输入组件，

import {Component,Provider,forwardRef} from "@angular/core";
import {ControlValueAccessor,NG_VALUE_ACCESSOR} from "@angular/forms";

const noop = () => {};

const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,useExisting: forwardRef(() => CustomInputComponent),multi: true
};

@Component({
  selector: 'custom-input',template: `

          <input[(ngModel)]="value" name="somename"
                 (blur)="onTouched()">

  `,providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class CustomInputComponent implements ControlValueAccessor{

  //The internal data model
  private _value: any = '';

  //Placeholders for the callbacks
  private _onTouchedCallback: () => void = noop;

  private _onChangeCallback: (_:any) => void = noop;

  //get accessor
  get value(): any { return this._value; };

  //set accessor including call the onchange callback
  set value(v: any) {
    if (v !== this._value) {
      this._value = v;
      this._onChangeCallback(v);
    }
  }

  //Set touched on blur
  onTouched(){
    this._onTouchedCallback();
  }

  //From ControlValueAccessor interface
  writeValue(value: any) {
    this._value = value;
  }

  //From ControlValueAccessor interface
  registerOnChange(fn: any) {
    this._onChangeCallback = fn;
  }

  //From ControlValueAccessor interface
  registerOnTouched(fn: any) {
    this._onTouchedCallback = fn;
  }

}

我有这样的应用程序模块，

/**
 * Created by amare on 8/15/16.
 */
import { NgModule }                     from '@angular/core';
import { browserModule }                from '@angular/platform-browser';
import { ReactiveFormsModule,FormsModule }          from '@angular/forms';
import { AppComponent }                 from './app/app.component';
import {CustomInputComponent} from "./app/shared/custom.input.component";
import {RouterModule} from "@angular/router";
@NgModule({
  imports: [ browserModule,ReactiveFormsModule,FormsModule,RouterModule ],declarations: [ AppComponent,CustomInputComponent],bootstrap: [ AppComponent ]
})
export class AppModule {  
}

和主要

import { platformbrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './app.module';

platformbrowserDynamic().bootstrapModule(AppModule);

并且我已经使用我的一个组件的自定义输入，如下所示，但是我获得了“没有指定名称属性的表单控件的值访问器”。

<custom-input name="firstName" [(ngModel)]="firstName"></custom-input>

而app.component看起来像这样

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

@Component({
  moduleId: module.id,selector: 'app-root',templateUrl: 'app.component.html',styleUrls: ['app.component.css']
})
export class AppComponent {
  title = 'app works!';

  firstName: string;
}

将ngDefaultControl添加到主机中的自定义输入组件解决了这个问题，谢谢@danieleds