Angular pass ngModel to component on change

Question

Trying to send the ngModel back to the component onchange to get it displayed on the console.

Html file: Trying to console.log the ngModel with the help of the log method.

<form action="">
    <div class="form-group">
        <label for="firstname">First name</label>
        <input type="text" id="firstName" name="firstName" #firstName = "ngModel"
        (change)="log(ngModel)" ngModel
        class="form-control"/>
    </div>

    <div class="form-group">
        <label for="comment">Comment</label>
        <textarea id="comment" cols="30" rows="10" class="formcontrol"></textarea>
    </div>
    <button class="btn btn-primary">Submit</button>
</form>

Component

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-form-contact',
  templateUrl: './form-contact.component.html',
  styleUrls: ['./form-contact.component.css']
})
export class FormContactComponent {

 log(x){
  console.log(x);
 }

}

getting the following errors:

No directive found with exportAs 'ngModel'. (name="firstName" #firstName = "ngModel")

Property 'ngModel' does not exist on type 'FormContactComponent'. ((change)="log(ngModel)"ngModel)

Can someone please direct me in the right direction?

Similar Question I found in StackOverFlow but that fix does not work. Also i am using the same tutorial mentioned there. I am using Angular 10 currently and the tutorial is angular 4

Also, what does ngModel mean here? I understand that [(ngModel)] is a 2-way binding. and [ngModel] would be an attribute and (ngModelChange) would be event together they form 2way binding. What does standalone ngModel represent?

score 4 · Answer 1 · answered Oct 27 '20 at 11:31

4

With your code you have created a template-reference-variable. Meaning that firstName has now the attributes of the directive ngModel.

I don't think that this is what you want. Maybe something like this works for you:

<input type="text" name="firstName" (ngModelChange)="log($event)" class="form-control"/>

answered Oct 27 '20 at 11:31

StPaulis

1,990
8
20

Actually i am following a tutorial where the instructor is trying to explain us formControl and has used the above code to console log all the attributes of the ngModel.But when i do the same i am getting error. Yes i want to console log the attributes of the ngModel to access the control property of it – Tejaswi Pandava Oct 27 '20 at 11:49
OK, If you are creating a playground... Check the order of the attributes, perhaps the `log()` should be after `ngModel`. I would put the `ngModel` in the beginning. – StPaulis Oct 27 '20 at 12:02

score 1 · Answer 2 · answered Oct 27 '20 at 12:23

There were 2 problems in my code

<input type="text" id="firstName" name="firstName" #firstName = "ngModel"
        (change)="log(ngModel)" ngModel
        class="form-control"/>

First is my log method where I was trying to send the ngModel directive as an argument. Instead, I should be using #firstname (table Variable) which holds attributes of ngModel. As pointed by @StPaulis
Need to add FormsModule to my imports in app.module.ts

Angular pass ngModel to component on change

2 Answers2