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

[Muthu2020]

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

[mmrath]

You don't need those commas I think. Better make a plunker with the issue if you still are facing it.

[Muthu2020]

Actually, I have used that tag in jade. Its looks like
md-input(placeholder='Organization Name',name='name',[ngModel] = 'orgSettings.name',ngControl='name',[ngClass] = "{'text-danger-error': !orgForm.controls.name.valid && isSubmitted}")``

[kbtz]

Show us how you're loading those templates in your code. If you're using webpack for example tell us which loaders are you using, how you configured it, etc...

[Muthu2020]

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

[Dona278]

@Muthu2020 you should use [(ngModel)] syntax for two-way binding.
Ex: md-input(placeholder='Organization Name', name='name', [(ngModel)]='orgSettings.name' , ngControl='name', [ngClass]="{'text-danger-error': !orgForm.controls.name.valid && isSubmitted}")

I tried this code:
Component.ts

test: any = {};
constructor() {
  this.test.value = "First value";  
}

Html page

<md-input placeholder="1st Change value" [(ngModel)]="test.value"></md-input>   
<md-input placeholder="2nd Change value" [(ngModel)]="test.value"></md-input>
{{ Value: test.value }}

And all works correctly without the value attribute

[jelbourn]

@Muthu2020 can you reproduce this in a plunker so that we can see it?

[alenaksu]

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

[jrmoser]

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

[kara]

As @jrmoser explained (thanks @jrmoser!), the plunker is missing the name attribute and the proper bootstrapping. Once these issues are fixed, md-input works as expected. You can read more about how to set up forms with Material here.

Closing, as this doesn't seem to be a bug. Please feel free to open another issue with a plunker example if you run into anything else that looks like it could be a bug.

[jonathan-casarrubias]

Thanks for clarifying!! I just had this issue

[vapits]

Is this related with this #1073 ?

[sumitramteke]

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

[naderafshari]

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

[EddyChina]

@naderafshari yes, I got the same problem in both 'ng build --prod' and 'ng i18n'. however, the application runs well on localhost, even just 'ng build' is ok. BUT NOT '--prod'.

[maifs]

Hi, i am getting an exception while using it. And formGroup is defined with form element but doesn't have the model instead it have options separately.

Password:
*ngIf="userLogin"
name="password"
[(ngModel)]="userLogin.password"
placeholder="Enter your password"
>
{{hide ? 'visibility' : 'visibility_off'}}

"@angular/cli": "^6.0.3",
"@angular/compiler-cli": "^6.0.2",
Node: V10.0.0
OS: windows 10 x64
Angular: 6.0.2
"@angular/animations": "^6.0.2",
"@angular/cdk": "^6.0.2",
"@angular/common": "^6.0.2",
"@angular/compiler": "^6.0.2",
"@angular/core": "^6.0.2",
"@angular/forms": "^6.0.2",
"@angular/http": "^6.0.2",
"@angular/material": "^6.0.2",
"@angular/platform-browser": "^6.0.2",
"@angular/platform-browser-dynamic": "^6.0.2",
"@angular/router": "^6.0.2",
"@ngx-translate/core": "^10.0.1",

"ts-node": "~6.0.3",
"tslint": "~5.10.0",
"typescript": "^2.7.2"

ERROR Error:
ngModel cannot be used to register form controls with a parent formGroup directive. Try using
formGroup's partner directive "formControlName" instead. Example:

<div [formGroup]="myGroup">
  <input formControlName="firstName">
</div>

[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._}