FormGroup binding between TS and HTML

Question

I am trying for the first time to make a Reactive form in Angular

Here is the code :

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from "@angular/forms";

@Component({
  selector: 'app-username-password',
  templateUrl: './username-password.component.html',
  styleUrls: ['./username-password.component.scss']
})
export class UsernamePasswordComponent implements OnInit {

  loginForm = new FormGroup({
    userName : new FormControl("Ashish"),
    password : new FormControl("")

  });

  // constructor() { }

  ngOnInit() {
  }

}

and HTML

<div class="container">
    <h2>Login Form</h2>
    <form [formGroup]="loginForm">
        <label> User Name</label>
        <input formControlName="userName" , type="text" , class="form-control">
    </form>
    {{loginForm.value | json}}
</div>

The HTML is not displaying anything.

Is there a mistake in it?

I am getting this error in comments

Regards, Ashish

Answer 1

You should add ReactiveFormsModule to your app.module.ts like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';



@NgModule({
  imports:      [ BrowserModule, ReactiveFormsModule],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { 

}