//your template

<form class="pb-5 px-3" [formGroup]="form">     <!--bind formGroup to the FormGroup object in your component-->

  <h2 class="text-center">Login</h2>

  <div class="form-group">

    <label for="username">Username</label>

    <input

      id="username"

      type="text"

      class="form-control"

      formControlName="username"                 <!--set formControlName to the relevant FormControl in your form object from the component-->

    />

  </div>

   <button class="btn btn-primary" type="submit">Sign Up</button>

</form>

​

​

​

//component.ts

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

import { FormGroup, FormControl } from '@angular/forms';  //<<<< import these

​

@Component({

  selector: 'signup-form',

  templateUrl: './signup-form.component.html',

  styleUrls: ['./signup-form.component.scss'],

})

export class SignupFormComponent {

  form = new FormGroup({            //<<<< create a FormGroup object

    username: new FormControl(),    //<<<< create your form controls

  });

}

​

​

//app.module.ts

import { ReactiveFormsModule } from '@angular/forms';

​

@NgModule({

  imports: [

    ReactiveFormsModule,

    ...

  ],

})

export class AppModule { }