使用 Angular 2 Material 2 Alpha 5 和 Angular 2 RC 2答案

【问题标题】：Using Angular 2 Material 2 Alpha 5 with Angular 2 RC 2使用 Angular 2 Material 2 Alpha 5 和 Angular 2 RC 2
【发布时间】：2016-10-27 15:30:38
【问题描述】：

几天前，我开始探索最近发布的 Angular 2 RC 2，并尝试将我的应用从 Angular 2 RC 1 迁移到 Angular 1 RC 2。

我在我的应用中使用 Angular 2 Material 2 Alpha 5。

虽然迁移并没有花太多时间，但当我编译运行应用程序时，我发现使用 Angular 2 材料 2 组件的表单已损坏。

材质表单控件不适用于Angular 2 RC 2，控制台显示如下错误：

EXCEPTION: No value accessor for 'firstName'.

我在md-input、md-slide-toggle 和md-checkbox 上对其进行了测试，但我都收到了以下异常。

EXCEPTION: No value accessor for 'Field name'.

【问题讨论】：

标签： angular angular2-forms angular-material2

【解决方案1】：

不要忘记在 main.ts（或 js）中将“provideForms”调用添加到您的引导代码

我的引导代码看起来像

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

【讨论】：

【解决方案2】：

我假设您已成功将表单迁移到 Angular 2 RC 2。

如果您要将 Angular 2 RC 1（或更早版本）表单迁移到 Angular 2 RC 2 您可能会发现这对新表单很有帮助

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

要使角材料起作用，您需要进行以下更改：

替换

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

与

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

在以下文件中：

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

尽管在材料组件源文件中进行上述更改适用于其他组件，但不适用于复选框。此更改确实消除了表单加载时的 ValueAccessor 错误，但是当提交表单时，如果选中复选框，它会在对象下方发布：

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

为了解决这个问题，我们需要对以下文件进行另一项更改：

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

定位

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

并将其替换为以下内容：

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

希望以上内容对你有用。

【讨论】：