1

几天前，我开始探索最近发布的 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'.
4

2 回答 2

1

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

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

如何将 Angular 2 RC 1（或更早版本）表单迁移到 Angular 2 RC 2 / RC 4 新表单

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

代替

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);
    };

我希望你会发现以上内容很有用。

于 2016-06-24T22:52:22.470 回答
0

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

我的引导代码看起来像

return bootstrap(<Type>AppComponent, [
    ...PROVIDERS,
    ...ENV_PROVIDERS,
    ...DIRECTIVES,
    ...PIPES,
    ...APP_PROVIDERS,
    ...APP_ROUTER_PROVIDERS,
    disableDeprecatedForms(),
    provideForms()
])
于 2016-07-29T08:59:54.560 回答