Questions tagged [angular-ngmodel]

Used in Angular.js - The ngModel directive binds an input, select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.

The ngModel directive binds an <input /> ,<select>, <textarea> (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.

ngModel is responsible for:

Binding the view into the model, which other directives such as input, textarea or select require.

Providing validation behavior (i.e. required, number, email, url).
Keeping the state of the control (valid/invalid, dirty/pristine, validation errors).
Setting related css classes on the element (ng-valid, ng-invalid, ng-dirty, ng-pristine).
Registering the control with its parent form.

Note: ngModel will try to bind to the property given by evaluating the expression on the current scope. If the property doesn't already exist on this scope, it will be created implicitly and added to the scope.

More on: http://docs.angularjs.org/api/ng/directive/ngModel

1617 questions

559

votes

8 answers

What's the difference between ng-model and ng-bind

I'm currently learning AngularJS and am having difficulty understanding the difference between ng-bind and ng-model. Can anyone tell me how they differ and when one should be used over the other?

angularjs angular-ngmodel ng-bind

asked Sep 14 '12 at 07:02

dubs

6,511
4
19
35

395

votes

21 answers

Angular error: "Can't bind to 'ngModel' since it isn't a known property of 'input'"

I'm using Angular 4 and I am getting an error in the console: Can't bind to 'ngModel' since it isn't a known property of 'input' How can I resolve this?

angular typescript angular-ngmodel angular-forms

asked Apr 08 '17 at 17:09

Vijay Kumar

4,059
3
11
6

283

votes

14 answers

Ng-model does not update controller value

Probably silly question, but I have my html form with simple input and button: {{ searchText }} Then in the controller (template and controller are called from…

javascript angularjs data-binding angular-ngmodel

asked Sep 27 '12 at 09:35

alchemication

5,084
6
22
21

144

votes

9 answers

How to set a selected option of a dropdown list control using angular JS

I am using Angular JS and I need to set a selected option of a dropdown list control using angular JS. Forgive me if this is ridiculous but I am new with Angular JS Here is the dropdown list control of my html Here both of them…

angular angular-ngmodel

asked Feb 28 '17 at 09:30

LittleDragon

2,317
2
18
23

107

votes

2 answers

ngModel Formatters and Parsers

I posted the same question in different form, but no one answered. I am not getting a clear picture of what the Formatters and Parsers do in angular js. By the definition, both the Formatters and Parsers look similar to me. Maybe I am wrong, as I…

angularjs angular-ngmodel

asked Apr 03 '14 at 14:48

RONE

5,415
9
42
71

103

votes

10 answers

AngularJS : ng-model binding not updating when changed with jQuery

This is my HTML: When I type into the box, the model is updated via the 2-way-binding mechanism. Sweet. However when I do this via JQuery... $('#selectedDueDate').val(dateText); It…

javascript jquery angularjs data-binding angular-ngmodel

asked Aug 08 '12 at 21:42

Greg

31,180
18
65
85

votes

5 answers

Angularjs: select not updating when ng-model is updated

I've created the following example so you can see exactly what is happening: http://jsfiddle.net/8t2Ln/101/ The same thing happens if I use ng-options. I have a different reason for doing it this way, but for the simplification of the example left…

javascript angularjs angular-ngmodel

asked Oct 06 '14 at 07:25

Jhorra

6,233
21
69
123

votes

7 answers

What is purpose of using forRoot in NgModule?

What is the purpose of using forRoot in NgModule? Is it same as the providers in AngularJS 1.x? How does it play the significant role in lazy loading? TIA.

angular angular-ngmodel

asked Nov 28 '17 at 04:25

Mantu Nigam

3,690
7
24
41

votes

13 answers

Angular bootstrap datepicker date format does not format ng-model value

I am using bootstrap date-picker in my angular application. However when I select a date from that date-picker underlying ng-model that I have bind gets updated I want that ng-model in one date format 'MM/dd/yyyy'. but it every times makes date like…

angularjs datepicker angular-ui angular-ui-bootstrap angular-ngmodel

asked Jun 13 '14 at 06:00

Jenish Rabadiya

6,708
6
33
62

votes

6 answers

angular 6 warning for using formControlName and ngModel

I recently upgraded the angular version to 6-rc. I got following warning It looks like you're using ngModel on the same form field as formControlName. Support for using the ngModel input property and ngModelChange event with reactive form…

angular angular-ngmodel angular-reactive-forms

asked Apr 19 '18 at 10:15

Akshay

3,558
4
43
77

votes

7 answers

Get user input from textarea

I'm new to angular2. I want to store user input from a text area in a variable in my component so I can apply some logic to this input. I tried ngModel but it doesn't work. My code for the textarea:

<div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/data-binding" class="post-tag grid--cell" title="show questions tagged 'data-binding'" rel="tag">data-binding</a> 
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/textarea" class="post-tag grid--cell" title="show questions tagged 'textarea'" rel="tag">textarea</a> 
                
                <a href="../../questions/tagged/angular-ngmodel" class="post-tag grid--cell" title="show questions tagged 'angular-ngmodel'" rel="tag">angular-ngmodel</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Jun 18 '16 at 14:29">asked Jun 18 '16 at 14:29</time>
    <a href="../../users/4617524/maryam" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/4617524.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Maryam" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/4617524/maryam" class="s-user-card--link">Maryam</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">1,043</li>
            <li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li>
            <li class="s-award-bling s-award-bling__silver" title="12 silver badge">12</li>
            <li class="s-award-bling s-award-bling__bronze" title="16 bronze badge">16</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-30048605">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>58</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>6</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/30048605/angularjs-ng-model-in-a-select" class="question-hyperlink">AngularJs - ng-model in a SELECT</a></h3>
        <div class="excerpt">JSfiddle
Problem:
I have a SELECT-element in my page, which is filled in with an ng-repeat. It also has a ng-model which has a default value.
When I change the value, the ng-model adapts, that's ok. But the dropdown-list shows an empty slot at…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> 
                
                <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> 
                
                <a href="../../questions/tagged/angularjs" class="post-tag grid--cell" title="show questions tagged 'angularjs'" rel="tag">angularjs</a> 
                
                <a href="../../questions/tagged/angular-ngmodel" class="post-tag grid--cell" title="show questions tagged 'angular-ngmodel'" rel="tag">angular-ngmodel</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked May 05 '15 at 09:06">asked May 05 '15 at 09:06</time>
    <a href="../../users/4632401/jordumus" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/4632401.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Jordumus" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/4632401/jordumus" class="s-user-card--link">Jordumus</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">2,763</li>
            <li class="s-award-bling s-award-bling__gold" title="2 gold badges">2</li>
            <li class="s-award-bling s-award-bling__silver" title="21 silver badges">21</li>
            <li class="s-award-bling s-award-bling__bronze" title="38 bronze badges">38</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-22158063">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>50</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>3</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/22158063/how-can-i-make-angularjs-ngchange-handler-be-called-only-when-user-finishes-ty" class="question-hyperlink">How can I make angularjs ngChange handler be called only when user finishes typing</a></h3>
        <div class="excerpt">I have an input field, where I want to apply the variant of ngChange. 
The input field is sort of binding with an ajax call, when user changes the input, the server side will process the data, however, I don't wanna make the call too often. 
Say the…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/angularjs" class="post-tag grid--cell" title="show questions tagged 'angularjs'" rel="tag">angularjs</a> 
                
                <a href="../../questions/tagged/angularjs-ng-change" class="post-tag grid--cell" title="show questions tagged 'angularjs-ng-change'" rel="tag">angularjs-ng-change</a> 
                
                <a href="../../questions/tagged/angular-ngmodel" class="post-tag grid--cell" title="show questions tagged 'angular-ngmodel'" rel="tag">angular-ngmodel</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Mar 03 '14 at 21:41">asked Mar 03 '14 at 21:41</time>
    <a href="../../users/2821224/9blue" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/2821224.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="9blue" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/2821224/9blue" class="s-user-card--link">9blue</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">4,693</li>
            <li class="s-award-bling s-award-bling__gold" title="9 gold badges">9</li>
            <li class="s-award-bling s-award-bling__silver" title="29 silver badges">29</li>
            <li class="s-award-bling s-award-bling__bronze" title="43 bronze badges">43</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-38365761">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>49</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>5</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/38365761/angular2-use-ngmodel-with-ngmodeloptions-standalone-true-to-link-to-a-referenc" class="question-hyperlink">Angular2: use [(ngModel)] with [ngModelOptions]="{standalone: true}" to link to a reference to model's property</a></h3>
        <div class="excerpt">Let's say I have a typescript object of type Mailtype like following:
export class Mailtype {
  constructor(
    public name?: string,
    public locale?: string,
    public email?: string,
    public properties? : Property[]
  ) {  }
}

Where its…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/typescript" class="post-tag grid--cell" title="show questions tagged 'typescript'" rel="tag">typescript</a> 
                
                <a href="../../questions/tagged/angular-ngmodel" class="post-tag grid--cell" title="show questions tagged 'angular-ngmodel'" rel="tag">angular-ngmodel</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Jul 14 '16 at 04:55">asked Jul 14 '16 at 04:55</time>
    <a href="../../users/4840567/calvin-hu" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/4840567.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Calvin Hu" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/4840567/calvin-hu" class="s-user-card--link">Calvin Hu</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">3,595</li>
            <li class="s-award-bling s-award-bling__gold" title="4 gold badges">4</li>
            <li class="s-award-bling s-award-bling__silver" title="18 silver badges">18</li>
            <li class="s-award-bling s-award-bling__bronze" title="23 bronze badges">23</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>

</div>
        </div>

</div>
        </div>
        <script src="../../static/js/stack-icons.js"></script>
        <script src="../../static/js/fromnow.js"></script>
        
    </body>
</html>