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

Question

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

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

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

material 表单控件不适用于 Angular 2 RC 2，并且控制台显示以下错误：

EXCEPTION: No value accessor for 'firstName'.

我在 md-input、md-slide-toggle 和 md-checkbox 上测试了它，我在所有这些上都收到了以下异常。

EXCEPTION: No value accessor for 'Field name'.

Answer 1

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

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

要使 angular material 正常工作，您需要进行以下更改：

替换

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

虽然在 material 组件源文件中进行上述更改适用于其他组件，但不适用于复选框。此更改确实消除了表单加载时的 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);
    };

希望以上内容对您有用。

Answer 2

不要忘记在 main.ts（或 js）

中添加对 bootstrap 代码的 "provideForms" 调用

我的 bootstrap 代码看起来像

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

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

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

angular2-forms

angular-material2

angular