How to use ngModel on input (Angular - TypeScript)

Question

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 "Can't bind to 'ngModel' since it isn't a known property of 'input'". 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 "ng serve" it throws it in the console.

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.

I'm using primeNg also if that's any relevant.

(Note that I only have one input field in my form because I wanted to resolve the issue first before adding more inputs)

sign-up.component.html

<div class="text-layout">
  <div class="p-fluid p-grid">
    <div class="p-field p-col-12 p-md-4">
        <span class="p-float-label">
            <input pInputText [(ngModel)]="usernamevalue" type="text" id="username">
        </span>
    </div>
  </div>
</div>

sign-up.component.ts

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 {
}

}

sign-up.module.ts

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 { }

app.module.ts

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 { }

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!

Answer 1

The problem is that [(ngModel)] requires a name tag. You can solve this by:

<div class="text-layout">
  <div class="p-fluid p-grid">
    <div class="p-field p-col-12 p-md-4">
        <span class="p-float-label">
            <input pInputText [(ngModel)]="usernamevalue" type="text" name="usernamevalue">
        </span>
    </div>
  </div>
</div>

This is stupid, yes, but required in angular.😌 Happy Coding!!