如何在 angular2 中使用材料设计中的输入。我得到了原始异常：“”没有值访问器答案

【问题标题】：How to use input in angular2 with material design.I got the ORIGINAL EXCEPTION: No value accessor for ' '如何在 angular2 中使用材料设计中的输入。我得到了原始异常：“”没有值访问器
【发布时间】：2016-11-19 10:19:52
【问题描述】：

在这里，我尝试将 angular2 中的输入与材料设计一起使用，但出现错误。我的代码仅在添加输入字段时才会生成错误。我想用材料设计实现输入。

    <dialog class="mdl-dialog" [open]="isOpen">
  <h4 class="mdl-dialog__title">Allow data collection?</h4>
  <div class="mdl-dialog__content">
    <p>
      Allowing us to collect data will let us get you the information you want faster.
    </p>

    <md-input placeholder="amount">
      <span md-prefix>$&nbsp;</span>
      <span md-suffix>.00</span>
    </md-input>
  </div>
  <div class="mdl-dialog__actions">
    <button md-raised-button color="primary" (click)="toggleDialog()">Agree</button>
    <button md-raised-button>Disagree</button>
  </div>
</dialog>

但我收到以下错误。

EXCEPTION: Error in http://localhost:5555/node_modules/@angular2-material/input/input.js class MdInput - inline template:0:844
    ORIGINAL EXCEPTION: No value accessor for ''
    Error: No value accessor for ''
        at new BaseException (forms.umd.js:599)
        at _throwError (forms.umd.js:1569)
        at setUpControl (forms.umd.js:1546)
        at NgModel._setUpStandalone (forms.umd.js:2349)
        at NgModel._setUpControl (forms.umd.js:2341)
        at NgModel.ngOnChanges (forms.umd.js:2300)
        at DebugAppView._View_MdInput0.detectChangesInternal (MdInput.template.js:249)
        at DebugAppView.AppView.detectChanges (core.umd.js:11841)
        at DebugAppView.detectChanges (core.umd.js:11945)
        at DebugAppView.AppView.detectViewChildrenChanges (core.umd.js:11867)


    ViewWrappedException {_wrapperMessage: "Error in http://localhost:5555/node_modules/@angul…ut/input.js class MdInput - inline template:0:844", _originalException: BaseException, _originalStack: "Error: No value accessor for ''↵    at new BaseExc…dules/@angular/core/bundles/core.umd.js:11867:23)", _context: DebugContext, _wrapperStack: "Error: Error in http://localhost:5555/node_modules…esInternal (LoginComponent_Host.template.js:30:8)"}

这是我的 .ts 文件

import { Component, OnInit } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { MdToolbar } from '@angular2-material/toolbar';
import { MdCard } from '@angular2-material/card';
import { MdButton } from '@angular2-material/button';
import { MdCheckbox } from '@angular2-material/checkbox';

import {FORM_DIRECTIVES} from '@angular/forms'
import { MdSpinner, MdProgressCircle } from '@angular2-material/progress-circle';

import {MD_INPUT_DIRECTIVES} from '@angular2-material/input'

//import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms/index';

/**
 * This class represents the lazy loaded LoginComponent.
 */
@Component({
  moduleId: module.id,
  selector: 'login-cmp',
  styleUrls: ['dialog.css'],
  templateUrl: 'login.component.html',
  directives: [
    ROUTER_DIRECTIVES, 
    MdToolbar,
    MdButton,
    MdCheckbox,
    MdSpinner,
    MdProgressCircle,
    MdCard,
    MD_INPUT_DIRECTIVES, FORM_DIRECTIVES]
})
export class LoginComponent implements OnInit {
  googleUrl: string = 'https://www.google.com';
  title1: string = 'Button';
  title4: string = 'Warn';
  isDisabled: boolean = true;
  isOpen: boolean = false;
  dialog:any;
  modalMethod: string;

  user: {
    email: string
    password: string
  } = {
    email: '',
    password: '',
  }

  toggleDialog() {
    this.isOpen = !this.isOpen;
    if (this.isOpen) {
      this.dialog.showModal();
    } else {
      this.dialog.close();
    }
  }

  ngOnInit() {
    this.dialog = document.querySelector('dialog');
  }

}

【问题讨论】：

标签： html typescript angular material-design angular-material

【解决方案1】：

由于 Angular Material 2 现在通过新表单更新支持 RC.4，因此您必须提供/安装表单。

bootstrap(AppComponent, [
 disableDeprecatedForms(),
 provideForms()
])

【讨论】：

嗨，这是 main.ts 文件的内容，这不起作用。请帮助我。输入字段在那里，但它的行为不像材料。 bootstrap(AppComponent, [ disableDeprecatedForms(), provideForms(), APP_ROUTER_PROVIDERS, { provide: APP_BASE_HREF, useValue: '' } ]);

【解决方案2】：

这为我解决了。请查看this

【讨论】：

谢谢亲爱的 Sureshreddy。这是最好的解决方案。它对我有用。非常感谢
请避免仅链接的答案。