ngModel 2-way binding not assigning after following the documentation

Question

My html file has the following in it:

<form (submit)="register()">
        <div class="form-group">
          <label for="username">Username</label>
          <input type="text" name='username' placeholder="Enter your username" [(ngModel)]="userData.username">

In my ts file for the same component I have:

userData: any = {};

Finally, in my app.module.ts I have:

import { NgModule } from '@angular/core';
@NgModule({
    ...,
    imports: [ ... FormsModule, ...],
    ...})

According to everything I've read, that is sufficient to have the data in my .ts file update, but it is not currently. I've tried manually updating ngModelChange seperately than the model (and updating the [] and () accordingly), changing names across the html file, removing elements from html and adding them back to find if something isn't working, and several other desperation tricks, but can't seem to figure out why this isn't properly binding.

Answer 1

Form control and ngModel shouldn't be implemented at the same time. If you're going to implement a form group, then use a form control. Otherwise, use ngModel.