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 two way data binding is not working.

See original GitHub issue

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

Issue Analytics

State:
Created 7 years ago
Comments:16 (2 by maintainers)

Top GitHub Comments

6reactions

jrmosercommented, Jul 18, 2016

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

5reactions

naderafsharicommented, Jan 1, 2018

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

Top Results From Across the Web

angular - @Input: Two way data binding not working

For two-way-binding using the [(xxx)] (banana-in-a-box) syntax, you need an @Input() and an @Output() with matching names like: @Input() myProp:String ...

Two-way binding - Angular

For two-way data binding to work, the @Output() property must use the pattern, inputChange , where input is the name of the @Input()...

Two-way data binding - Android Developers

Two -way data binding provides a shortcut to this process: ... on using BaseObservable and @Bindable , see Work with observable data objects....

Angular Basics: Data Binding Part 8—Two-Way Data Binding

Data binding can be confusing when you're getting started in Angular. Let's break it down! This post covers two-way data binding.

Two way Data Binding in Angular 8 - Javatpoint

To resolve this problem, Angular provides two-way data binding. The two-way binding has a feature to update data from component to view and...