Angular 2 RC2 radio button binding broken

Question

I used this solution Angular2 - Radio Button Binding for radio button binding. It worked fine under RC1.

But when I upgrade to Angular2 RC2. there is a compile error

    app/shared/services/radio.value.accessor.ts(22,5): error TS2345: 
Argument of type                       '{ selector:  string; 
                                          host: { [x: string]: string; '(change)': string; '(blur)': string; }; 
                                          binding...' 
is not assignable to parameter of type '{ selector?: string; 
                                          inputs?: string[]; 
                                          outputs?: string[]; 
                                          properties?: string[]; 
                                          events?: strin...'.
  Object literal may only specify known properties, and 'bindings' does not exist in type 
                                       '{ selector?: string; 
                                          inputs?: string[]; 
                                          outputs?: string[]; 
                                          properties?: string[]; 
                                          events?: strin...'.

The code is listed as below.

import {Directive, Renderer, ElementRef, forwardRef} from '@angular/core';
import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/common';

export const RADIO_VALUE_ACCESSOR: any = /*@ts2dart_const*/ {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => RadioControlValueAccessor),
    multi: true
};

/**
 * The accessor for writing a value and listening to changes on a radio input element.
 *
 *  ### Example
 *  ```
 *  <input type="radio" ngModel="radioModel">
 *  ```
 */
@Directive({
    selector: 'input[type=radio][ngControl],input[type=radio][ngFormControl],input[type=radio][ngModel]',
    host: {'(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},
    bindings: [RADIO_VALUE_ACCESSOR]
})
export class RadioControlValueAccessor implements ControlValueAccessor {
    onChange = (_:any) => {} ;
    onTouched = () => {};

    constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}

    writeValue(value: any): void {
        this._renderer.setElementProperty(this._elementRef.nativeElement, 'checked', value == this._elementRef.nativeElement.value);
    }
    registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; }
    registerOnTouched(fn: () => {}): void { this.onTouched = fn; }
}

Any idea how to fix this?

Or does RC2 include radio button binding in a way that I don't have to use external code? If so how?

score 2 · Answer 1 · answered Jun 19 '16 at 15:17

I think there is still bindings in RC2, take a look here:

export interface ComponentMetadataFactory {
    (obj: {
        selector?: string;
        inputs?: string[];
        outputs?: string[];
        properties?: string[];
        events?: string[];
        host?: {
            [key: string]: string;
        };
        bindings?: any[];
        providers?: any[];
        exportAs?: string;
        moduleId?: string;
        queries?: {
            [key: string]: any;
        };
        viewBindings?: any[];
        viewProviders?: any[];
        changeDetection?: ChangeDetectionStrategy;
        templateUrl?: string;
        template?: string;
        styleUrls?: string[];
        styles?: string[];
        directives?: Array<Type | any[]>;
        pipes?: Array<Type | any[]>;
        encapsulation?: ViewEncapsulation;
    }): ComponentDecorator;
    new (obj: {
        selector?: string;
        inputs?: string[];
        outputs?: string[];
        properties?: string[];
        events?: string[];
        host?: {
            [key: string]: string;
        };
        bindings?: any[];
        providers?: any[];
        exportAs?: string;
        moduleId?: string;
        queries?: {
            [key: string]: any;
        };
        viewBindings?: any[];
        viewProviders?: any[];
        changeDetection?: ChangeDetectionStrategy;
        templateUrl?: string;
        template?: string;
        styleUrls?: string[];
        styles?: string[];
        directives?: Array<Type | any[]>;
        pipes?: Array<Type | any[]>;
        encapsulation?: ViewEncapsulation;
    }): ComponentMetadata;
}

if the binding is there then why did it stopped working? can you help explain please? — Shawn, Jun 19 '16 at 16:01
Try to pass the radiovalueaccesor as a simple object not array — null canvas, Jun 19 '16 at 16:19
Do you mean change `bindings: [RADIO_VALUE_ACCESSOR]` to `bindings: {obj: RADIO_VALUE_ACCESSOR}` ? Maybe I misunderstand you? — Shawn, Jun 19 '16 at 20:25
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/115053/discussion-between-shawn-and-angjobs). — Shawn, Jun 19 '16 at 20:31

score 1 · Answer 2 · answered Jun 19 '16 at 20:58

Change

@Directive({
    selector: 'input[type=radio][ngControl],input[type=radio][ngFormControl],input[type=radio][ngModel]',
    host: {'(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},
    bindings: [RADIO_VALUE_ACCESSOR]
})

to

@Directive({
    selector: 'input[type=radio][ngControl],input[type=radio][ngFormControl],input[type=radio][ngModel]',
    host: {'(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},
    providers: [RADIO_VALUE_ACCESSOR]
})

and it works fine now. Thanks to AngJobs for the clue as to where to change.

Angular 2 RC2 radio button binding broken

2 Answers2