angular2 custom form input Cannot read property 'name' of undefined

Question

When I migrated to the new agular version 2 final I get the following error

Uncaught TypeError: Cannot read property 'name' of undefined

My custom input

import { Component, EventEmitter, Provider, forwardRef } from '@angular/core';
import isoLangs from '../../models/languageObjects/isoLangs';
import AbstractValueAccessor from '../AbstractValueAccessor';
import { NG_VALUE_ACCESSOR } from '@angular/common';

@Component({
    selector: 'input-language',
    template: `
<div class="input-widget">
    <input type="text" placeholder="Language" [(ngModel)]="query" (click)="showLang = !showLang" (keyup)="showLang = true"/>
    <span (click)="value = ''" class="clear icon-clear-field_S"></span>
    <div class="languages" [hidden]="!showLang">
        <div *ngFor="let lang of isoLangs | filter:query" (click)="setLanguage(lang)">
            {{lang.name}}
        </div>
    </div>
</div>
    `,
    styles: [require('./input-language.component.sass')],
    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputLanguageComponent), multi: true }],
})
export class InputLanguageComponent extends AbstractValueAccessor {
    constructor() {
        super();
        this.langSelected = new EventEmitter(false);
        this.isoLangs = isoLangs;
    }

    ngOnInit() {
        console.log('init input-lang this.value ', this.value);
    }

    set value(v) {
        if (v !== this._value) {
            this._value = v;
            this.query = this.isoLangs[v];
            this.onChange(v);
        }
        if (!v) {
            console.log('clear');
            this.query = '';
            this.showLang = false;
        }
    }
    setLanguage(lang) {
        this.value = lang.iso;
        this.query = lang.name;
        this.showLang = false;
        this.langSelected.emit(lang);
    }
}

I use it in a form with

<input-language formControlName="defaultLanguage" ngDefaultControl></input-language>

following the stacktrace I found in transformer.ts

const injectors = element.providerTokens.map(t => functionName(t));

that if I look into element.providerTokens I see an undefined element

0:DefaultValueAccessor(_renderer, _elementRef)
1:OpaqueToken
2:FormControlName(parent, validators, asyncValidators, valueAccessors)
3:NgControl()
4:NgControlStatus(cd)
5:InputLanguageComponent()
6:undefined

Also I wonder why I have to use ngDefaultControl

Without it I get

No value accessor for form control with name: 'defaultLanguage'

select · Accepted Answer · 2016-09-19 11:41:28Z

3

After some debugging I found that

import { NG_VALUE_ACCESSOR } from '@angular/common';

change to

import { NG_VALUE_ACCESSOR } from '@angular/forms';

which solved the issue.

answered Sep 19, 2016 at 11:41

select

2,6482 gold badges28 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular2 custom form input Cannot read property 'name' of undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related