components: md-input two way data binding is not working.

I have used the following tag in html.

"<md-input placeholder='Organization Name',name='name',[(ngModel)]='orgSettings.name',ngControl='name',[ngClass] = "{'text-danger-error': !orgForm.controls.name.valid && isSubmitted}">"

I have added following code in typescript within the constructor. this.orgSettings[‘name’] =‘test’;

Versions used angular2-2.0.0rc4 @angular/forms - 0.2.0 material2-alpha6

Can you please guide me to resolve this issue

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 16 (2 by maintainers)

Most upvoted comments

@alenaksu The only issue you are having with Material, is that when you use ngModel you must include the name attribute. However you wouldn’t have found this out without fixing the bigger issue that you were having, which was with Angular’s forms. They are currently going through a deprecation phase and so there are some things you must do to make your plunker work. Here is a working plunker and the code I adjusted to make it work was:

app/main.ts

...
import { disableDeprecatedForms, provideForms } from '@angular/forms';
...

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

then on your input don’t forget to put in the name attribute:

<md-input ... name="email"></md-input>

jrmoser on Jul 18, 2016

two way binding works for me in localhost mode but not in production mode (ng build --prod)! If I don’t use material then it works in production too

This don’t work in production…

  <mat-form-field *ngIf="userInfo">
    <input matInput name="userInfo.lastName" [(ngModel)]="userInfo.lastName" placeholder="Last Name.."> 
  </mat-form-field>

This works in production…

  <input *ngIf="userInfo" [(ngModel)]="userInfo.lastName" placeholder="Last Name..">

**Angular CLI: 1.6.2 Node: 6.12.0 OS: linux x64 Angular: 5.1.2 … animations, common, compiler, compiler-cli, core, forms … http, language-service, platform-browser … platform-browser-dynamic, router

@angular/cdk: 5.0.2 @angular/cli: 1.6.2 @angular/material: 5.0.2 @angular-devkit/build-optimizer: 0.0.36 @angular-devkit/core: 0.0.22 @angular-devkit/schematics: 0.0.42 @ngtools/json-schema: 1.1.0 @ngtools/webpack: 1.9.2 @schematics/angular: 0.1.11 @schematics/schematics: 0.0.11 typescript: 2.4.2 webpack: 3.10.0**

Anyone has any ideas why production version doesn’t work? Thanks

naderafshari on Jan 1, 2018

For me it is working as

<md-form-field>
      <input mdInput name="uname" [(ngModel)]="uname" placeholder="username">
</md-form-field>

@angular/material: 2.0.0-beta.10 @angular/forms: 4.3.6 @angular/core: 4.3.6

sumitramteke on Nov 3, 2017

Hi @jelbourn, I have the same problem, you can see it here

alenaksu on Jul 15, 2016

Actually, this issue is fixed by adding value attribute in md-input tag. Thank you for your reply.

Muthu2020 on Jul 13, 2016