Question

这里我试图使用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');
  }

}

Answer 1

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

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

Answer 2

这为我解决了。请检查this

如何在材料设计中使用angular2中的输入。我得到了原始的例外：''没有值的访问者

2 个答案: