title: How to use ngModel on input (Angular - TypeScript)
body: <p>I'm pretty new to Angular, and I'm trying to make a form to ask for some user's input so I can make a simple signup. When I try to use ngModel in my input for two way data binding, I'm getting an error saying &quot;Can't bind to 'ngModel' since it isn't a known property of 'input'&quot;. After searching the forums for a while, I've seen the common solution is to import FormsModule in my app.module, so I did it, and nothing changed. The strange part is that after importing it, typescript stopped showing the error on the editor, but when I try to do &quot;ng serve&quot; it throws it in the console.</p>
  <p>I'll add my relevant code here so you can check it, but after almost an hout trying to find the solution I keep getting the error so that's why I came and asked, because I can't seem to find a proper solution on other related questions.</p>
  <p>I'm using primeNg also if that's any relevant.</p>
  <p>(Note that I only have one input field in my form because I wanted to resolve the issue first before adding more inputs)</p>
  <p><strong>sign-up.component.html</strong></p>
  <pre><code>&lt;div class=&quot;text-layout&quot;&gt;
    &lt;div class=&quot;p-fluid p-grid&quot;&gt;
      &lt;div class=&quot;p-field p-col-12 p-md-4&quot;&gt;
          &lt;span class=&quot;p-float-label&quot;&gt;
              &lt;input pInputText [(ngModel)]=&quot;usernamevalue&quot; type=&quot;text&quot; id=&quot;username&quot;&gt;
          &lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>sign-up.component.ts</strong></p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
   selector: 'app-sign-up',
   templateUrl: './sign-up.component.html',
   styles: [
   ]
  })
  export class SignUpComponent implements OnInit {
  
  usernamevalue: any;
  
  constructor() { }
  
  ngOnInit(): void {
  }
  
  }
  </code></pre>
  <p><strong>sign-up.module.ts</strong></p>
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { SignUpComponent } from './sign-up.component';
  import { PrimeNgModule } from '../prime-ng/prime-ng.module';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  
  
  
  @NgModule({
  declarations: [
   SignUpComponent
  ],
  imports: [
   CommonModule,
   PrimeNgModule,
   FormsModule,
   ReactiveFormsModule
  ],
  exports: [
   SignUpComponent
  ]
  })
  export class SignUpModule { }
  </code></pre>
  <p><strong>app.module.ts</strong></p>
  <pre><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  
  import { AppComponent } from './app.component';
  import { MainPageModule } from './main-page/main-page.module';
  import { SharedModule } from './shared/shared.module';
  import { AppRouterModule } from './app-router.module';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  
  @NgModule({
   declarations: [
    AppComponent
   ],
   imports: [
    BrowserModule,
    MainPageModule,
    SharedModule,
    AppRouterModule,
    FormsModule,
    ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
   })
   export class AppModule { }
  </code></pre>
  <p>If you need me to provide any more code I'll be willing to help and post it under these, thank you very much for your time!</p>