Angular 2 form.value property is undefined

Question

I'm trying to use the name and [(ngModel)] template driven forms syntax for the first time, on a custom control which uses a controlValueAccessor which I am also using for the first time.

When I enter some words into my then log my form.value to the console, I see the name of the form field that I added but it is still undefined:

Object {keywords: undefined}

If I programmatically set a value for result.keywords, then when I log the form.value to the console, the keywords property is populated. The binding from the model to the form.value is working. The binding from the view (html input control) to the model is not working.

ngOnInit() {
    this.result = new Result();
    this.result.keywords = ["aaa"]; <----works
}

The above will show ["aaa"] in the console but it will not show anything in the view. How can I correctly get the keywords property of the form to populate?

My code:

My form:

input-component.ts:

import { Component, ViewChild, ElementRef, Input, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

const noop = () => {
};

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


@Component({
    selector: 'vepo-input',
    templateUrl: 'app/shared/subcomponents/input.component.html',
    styleUrls: ['app/shared/subcomponents/input.component.css'],
    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})

export class InputComponent implements ControlValueAccessor {
    @Input() private placeholder: string;
    @Input() private id: string;

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

    //Placeholders for the callbacks which are later providesd
    //by the Control Value Accessor
    private onTouchedCallback: () => void = noop;
    private onChangeCallback: (_: any) => void = noop;

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

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

    //Set touched on blur
    onBlur() {
        this.onTouchedCallback();
    }

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

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

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

}

input.component.html:

My form is actually a lot bigger than what I posted but I don't wanna overload everyone with irrelevant code. For the sake of completeness here is the full form.ts file:

import {
    Component,
    ViewChild,
    ElementRef,
    EventEmitter,
    Output,
    OnInit
} from '@angular/core';
import {
    FormGroup,
    FormBuilder,
    Validators,
    ControlValueAccessor
} from '@angular/forms';
import { ResultService } from '../../../services/result.service';
import { Result } from '../../../models/all-models';
import { HighlightDirective } from '../../../directives/highlight.directive';
import { DistanceUnitsComponent } from './distance-units.component';
import { MultiselectComponent } from './multiselect-find-category.component';
import { MultiselectFindMealTypeComponent } from
    './multiselect-find-meal-type.component';
import { AreaComponent } from './area-picker.component';
import { NumberPickerComponent } from './number-picker.component';
import { InputComponent } from '../../../shared/subcomponents/input.component';

@Component({
    selector: 'find-form',
    templateUrl: 'app/find-page/subcomponents/find-page/find-form.component.html',
    styleUrls: ['app/find-page/subcomponents/find-page/find-form.component.css'],
    providers: [ResultService]
})
export class FindFormComponent implements OnInit {

    @ViewChild('multiselectFindCategory')
    private multiselectFindCategory: MultiselectComponent;
    @ViewChild('multiselectFindMealType')
    private multiselectFindMealType: MultiselectFindMealTypeComponent;
    @ViewChild('distanceUnits') private distanceUnits: DistanceUnitsComponent;
    @ViewChild('numberPicker') private numberPicker: NumberPickerComponent;
    @ViewChild('areaInput') private areaInput: AreaComponent;
    @ViewChild('keywordsInput') private keywordsInput: InputComponent;

    @Output() private onResultsRecieved:
    EventEmitter

silentsod · Accepted Answer

Alright, here's my stab at your intent with a working plunker to back up the work:

In your input.component.html you need to make sure you have the bindings set up into ngModel

Aside from that, there's really nothing else to do.

Here's the plunker: http://plnkr.co/edit/HleTVBnvd8ePgMClAZS2?p=preview

Angular 2 form.value property is undefined

Answers (1)

Related Questions