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

[maciejtreder]

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

[elvirdolic]

You have to update to the new forms module:

see here:
https://github.com/angular/material2/issues/803

and
here: https://angular.io/docs/ts/latest/guide/forms.html

[RAlfoeldi]

There must be something else missing.

I have the same problem as the op.

I've just deleted all node deps and reinstalled. I'm getting

npm WARN @angular2-material/[email protected] requires a peer of @angular/forms@^0.1.0 but none was installed.

normal <input>s work. <md-input> doesn't.

<form>

  UidPrefix: <md-input [(ngModel)]="ve.uidPrefix" name="uidPrefix" type="text"></md-input><br>
  Uid: <input [(ngModel)]="ve.uid" name="uid" type="text"><br>

I'm getting browser_adapter.js:84Error: Uncaught (in promise): No value accessor for 'uidPrefix'

And yes, I have enabled the 'new' forms:

package.json:
   "@angular/forms": "0.2.0",
    "@angular2-material/core": "2.0.0-alpha.6",
    "@angular2-material/input": "2.0.0-alpha.6",


main.ts:
import {provideForms, disableDeprecatedForms} from "@angular/forms";
...
bootstrap(ExchComponent,
    [
      disableDeprecatedForms(),
      provideForms(),
...

I currently have no problem waiting for a working solution, but maybe there is still a problem you haven't realized yet.

[maciejtreder]

@RAlfoeldi Same on my side.<input> works correctly, but <md-input> not.

[wardberckmans]

Same issue here on <md-input>.

[drager]

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>

[kara]

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.

[DzmitryShylovich]

http://plnkr.co/edit/lTdUX1SyRR1wl9lptS3k?p=preview everything is working fine

[RAlfoeldi]

Ok, works for me now. Thanks for the hint.

[kara]

OK, it seems like this might not be a bug, but rather a problem of insufficient documentation on our end. I'm adding a section to the GETTING_STARTED guide with some more info on this: https://github.com/angular/material2/pull/810.

If anyone is still having issues with md-input, please feel free to re-open with a demonstrative plunker.

[albanx]

Hi Guys
I am facing this problem when I try to create a simple login form with md-input and the ngFormModel. Please find the pluker demo here (not working on plunker).

http://plnkr.co/edit/ZT2pGoLgiSmqGctmhiG9?p=preview

What I am doing wrong? Is ngFormModel still valid?

I followed this guide to make a simple login form with material design:
https://angular.io/docs/js/latest/api/common/index/NgFormModel-directive.html

[soorireddy]

+1

[dalestone]

I had a similar issue, turns out it was to do with using Angular2 RC1 dependencies as far as I can.

I changed to RC2 and it started working fine, e.g "2.0.0-rc.1" to "2.0.0-rc.2" for all angular packages.

...
  "dependencies": {
    "@angular/common": "2.0.0-rc.2",
    "@angular/compiler": "2.0.0-rc.2",
    "@angular/core": "2.0.0-rc.2",
    "@angular/forms": "^0.2.0",
    "@angular/http": "2.0.0-rc.2",
    "@angular/platform-browser": "2.0.0-rc.2",
    "@angular/platform-browser-dynamic": "2.0.0-rc.2",
    "@angular/router": "2.0.0-rc.2",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.2",
    "@angular2-material/button": "^2.0.0-alpha.6",
    "@angular2-material/card": "^2.0.0-alpha.6",
    "@angular2-material/core": "^2.0.0-alpha.6",
    "@angular2-material/icon": "^2.0.0-alpha.6",
    "@angular2-material/input": "^2.0.0-alpha.6",
    "@angular2-material/list": "^2.0.0-alpha.6",
    "@angular2-material/sidenav": "^2.0.0-alpha.6",
    "@angular2-material/toolbar": "^2.0.0-alpha.6",
    "angular2-in-memory-web-api": "0.0.11",
    "angular2-jwt": "^0.1.18",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.12"
  },
...

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}