Angular Template Driven Approche Pass textbox Value to Componet.ts on textbox Change event

Question

While practicing validation using Template Driven Approche, got an error as

Parameter 'val' implicitly has an 'any' type, but a better type may be inferred from usage.ts(7044)

here I am adding related files please help.

<form>
<div class="form-group">
    <label for="firstName">First Name</label>
    <input ngModel name="firstName" #firstName="ngModel" (change)="log(firstName)"  id=firstName type="text" class="form-control">
</div>   
<div class="form-group">
    <label for="comment">Comments</label>
    <textarea   id=comment type="text" cols="5" rows="10" class="form-control"></textarea>
</div>
<div class="form-group">
<button class="btn btn-danger">Submit</button>
</div>
</form>

component.ts

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

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

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

tsconfig.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ],
    "noImplicitAny": false
  },
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

What is the type that is inferred in visual studio code if you hover over this parameter? — Panagiotis Bougioukos, Dec 14 '20 at 14:32
@PanagiwthsMpougioukos - (parameter) val: any . when i click Ctrl+ . it has been changed to log(val: any) — Jks, Dec 14 '20 at 14:36

score 0 · Accepted Answer · answered Dec 14 '20 at 16:16

Added FormsModule in app.module.ts under imports

imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule -- Added Here 
    
  ],

will be solved the issue for me

Also found an error in the console as Error: Export of name 'ngModel' not found

Angular Template Driven Approche Pass textbox Value to Componet.ts on textbox Change event

1 Answers1