Support @angular/forms

[aquinum6]

It seems that material does not work with new forms. I have used formControlName directive and I got error that there is no value accessor for certain field in my case 'email':

No value accessor for 'email'

I have changed import in input/index.js from:

var common_1 = require('@angular/common');

to:

var common_1 = require('@angular/forms');

and it seems to start working.

[0cv]

@aquinum6 Can you detail a bit more what you've done? Importing REACTIVE_FORM_DIRECTIVES, and so on from @angular/forms didn't help.

[naveedahmed1]

@Krisa you might find this helpful for new forms

http://stackoverflow.com/questions/37871271/how-to-migrate-angular-2-rc-1-or-earlier-forms-to-angular-2-rc-2-new-forms/37902014#37902014

For angular material to work you need to make below changes:

Replace
var common_1 = require('@angular/common');
with
var common_1 = require('@angular/forms');

in the following files:

node_modules/@angular2-material/checkbox/checkbox.js
node_modules/@angular2-material/input/input.js
node_modules/@angular2-material/radio/radio.js
node_modules/@angular2-material/slide-toggle/slide-toggle.js

[0cv]

@naveedahmed1 ahh indeed, this did the trick. I didn't come on the idea to modify the source file directly, thank you!

[Drol]

@Krisa You should read the official document too. https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub

[0cv]

@Drol, I did, that's now working. My only problem was, as referred before, the angular2-material source files I "forgot" to modify.

[naveedahmed1]

Though replacing

var common_1 = require('@angular/common');
with
var common_1 = require('@angular/forms');

in material components source files seems to be working for other components but doesn't seems to work for Checkboxes. This change does remove the ValueAccessor error on form load, but when the form is submitted it posts below object in case of checkbox if its checked:

myCheckbox: MdCheckboxChange
checked:true
source:MdCheckbox
__proto__:Object
constructor:MdCheckboxChange()
__proto__:Object

For your information @jelbourn and @kara

[aquinum6]

@naveedahmed1
It seems that valueAccessor subscribe to (change) whole event in checkbox:

MdCheckbox.prototype.registerOnChange = function (fn) {
    if (this._changeSubscription) {
        this._changeSubscription.unsubscribe();
    }
    this._changeSubscription = this.change.subscribe(fn);
};

to fix this just map change to proper value:

MdCheckbox.prototype.registerOnChange = function (fn) {
        if (this._changeSubscription) {
            this._changeSubscription.unsubscribe();
        }
        this._changeSubscription = this.change
        .map(function (v) {
            return v.checked;
        })
        .subscribe(fn);
    };

It works for me.