question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

md-input doesn't work after update to alpha 6

See original GitHub issue

Bug, feature request, or proposal:

Completely lost of functionality

What is the expected behavior?

md-input should be displayed

What is the current behavior?

Got exception:

EXCEPTION: Error in http://localhost:3000/node_modules/@angular2-material/input/input.js class MdInput - inline template:0:844

ORIGINAL EXCEPTION: No value accessor for ‘’

etc. etc.

What are the steps to reproduce?

import {Component} from '@angular/core';
import {MD_INPUT_DIRECTIVES} from '@angular2-material/input';

@Component({
  selector: 'attribute-types',
  template: `<md-input></md-input>`,
  directives: [
    MD_INPUT_DIRECTIVES
  ],
  styleUrls: ['app/productsSettings/formList.css'],
})

export class AttributeTypesComponent implements OnInit{

}

Which versions of Angular, Material, OS, browsers are affected?

Angular: 2.0.0-rc.4 Material: 2.0.0-alpha.6 Browsers: Safari, Chrome, FireFox OS: OS X El Capitan, iOS 9.3

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:13 (3 by maintainers)

github_iconTop GitHub Comments

4reactions
karacommented, Jul 4, 2016

Is anyone importing symbols from @angular/common rather than @angular/forms? The “no value accessor” error usually appears when you mix the old and new forms APIs by mistake.

If you’re not and you’re sure you’re bootstrapping correctly, can you provide a plunker demonstrating the problem? Alpha.6 md-input works fine for me, but perhaps we’re testing differently.

4reactions
dragercommented, Jul 4, 2016

Hmm, I got i working just fine using the new forms with the alpha 6 version (Did not work before in the alpha 5 version with the new forms).

Be sure to bootstrap the disableDeprecatedForms() and provideForms(). Also make sure your <md-input> has a name attribute. Here’s some example code:

// main.ts

import {bootstrap} from '@angular/platform-browser-dynamic'
import {disableDeprecatedForms, provideForms} from '@angular/forms'

bootstrap(App, [
  disableDeprecatedForms(),
  provideForms(),
]).catch(err => console.error(err))
// sign-in.ts

import {Component} from '@angular/core'
import {FORM_DIRECTIVES} from '@angular/forms'
import {MdButton} from '@angular2-material/button/button'
import {MdIcon, MdIconRegistry} from '@angular2-material/icon/icon'
import {MD_INPUT_DIRECTIVES} from '@angular2-material/input/input'

const template = require('./sign-in.html')

@Component({
  selector: 'sign-in',
  template: template,
  directives: [MdButton, MdIcon, MD_INPUT_DIRECTIVES, FORM_DIRECTIVES,],
  viewProviders: [MdIconRegistry],
})
export class SignIn {
  user: {
    email: string
    password: string
  } = {
    email: '',
    password: '',
  }
  constructor() {}
}
// sign-in.html

<form>
      <md-input #email
                required
                type="email"
                name="email"
                placeholder="Email Address"
                [(ngModel)]="user.email">
      </md-input>
      <md-input #password
                required
                type="password"
                name="password"
                placeholder="Password"
                [(ngModel)]="user.password">
      </md-input>
      <button type="submit" md-raised-button>Login</button>
  </form>
Read more comments on GitHub >

github_iconTop Results From Across the Web

md-input doesn't work after update to alpha 6 · Issue #809 · angular ...
Hmm, I got i working just fine using the new forms with the alpha 6 version (Did not work before in the alpha...
Read more >
angular - Error while using md-input-container - Stack Overflow
This worked for me. app.module.ts import { MaterialModule } from '@angular/material'; ... @NgModule({ imports: [ MaterialModule ] }).
Read more >
angular/material2 - Gitter
Update to material2 alpha.6. For some reason npm install does not automatically update from alpha.5-3 to alpha.6 even after you run npm ...
Read more >
Input - NativeBase
The Input component allows a user to provide input in a text field. Show Code.
Read more >
Files · 2.0.0-alpha.10 · npm / ang / material2-tempfix - GitLab
See our Getting Started Guide if you're building your first project with ... work on https://material.angular.io site; Major refactoring for md-input ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found