Wie Eingang in angular2 mit Material Design zu verwenden.Ich habe die ursprüngliche Ausnahme: Kein Wert Accessor für ''

Question

Hier versuche ich die Eingabe in angular2 mit Material-Design und ich habe den Fehler.Mein Code ist nur Fehler erzeugen wenn ich das Eingabefeld addiere. Ich möchte Eingabe mit Materialdesign implementieren.

<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> 

Aber ich habe den folgenden Fehler.

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

hier ist meine .ts

Datei

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

Da Angular-Material 2 unterstützt nun RC.4 mit dem neuen Formen zu aktualisieren, werden Sie zu bieten haben/die Formulare installieren.

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

Answer 2

Das löste sich für mich. Bitte prüfen this