CODEWITHSUNDEEP
angularangular2-formsangular-material2
Naveed Ahmed
Naveed Ahmed

Reputation: 10386

Using Angular 2 Material 2 Alpha 5 with Angular 2 RC 2

A few days back I started exploring the recently released Angular 2 RC 2 and tried to migrate my app from Angular 2 RC 1 to Angular 1 RC 2.

I am using Angular 2 Material 2 Alpha 5 in my app.

Though the migration didn't take much time, when I compiled and ran the app, I found the forms using Angular 2 material 2 components were broken.

The material form controls don't work with Angular 2 RC 2, and the console shows the following errors:

EXCEPTION: No value accessor for 'firstName'.

I tested it on md-input, md-slide-toggle and md-checkbox and I receive below exception on all of them.

EXCEPTION: No value accessor for 'Field name'.

Upvotes: 1

Views: 591

Answers (2)

Alexey Petushkov
Alexey Petushkov

Reputation: 2158

Dont forget to add "provideForms" call to your bootstrap code in main.ts (or js)

My bootstrap code looks like

return bootstrap(<Type>AppComponent, [
    ...PROVIDERS,
    ...ENV_PROVIDERS,
    ...DIRECTIVES,
    ...PIPES,
    ...APP_PROVIDERS,
    ...APP_ROUTER_PROVIDERS,
    disableDeprecatedForms(),
    provideForms()
])

Upvotes: 0

Naveed Ahmed
Naveed Ahmed

Reputation: 10386

I assume you have successfully migrated your forms to Angular 2 RC 2.

If you are migrating your Angular 2 RC 1 (or earlier) forms to Angular 2 RC 2 you might find this helpful for new forms

How to migrate Angular 2 RC 1 (or earlier) Forms to Angular 2 RC 2 / RC 4 New Forms

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

Though making above changes in material components source files works for other components but doesn't 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

In order to fix this, we need to make another change in the following file:

node_modules/@angular2-material/checkbox/checkbox.js

Locate

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

and replace it with the following:

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

I hope you will find the above useful.

Upvotes: 1

Related Questions