Why my reactive form doesn't work in angular 19?

I am learning angular and trying to create reactive form for user authentification. To indicate if my firm work I added {{ LoginForm.value | json }. But it seems not to work. When I type something into input, correspondent json field doesn't change. I tried to change the way form is build in component, force change but nothing works. Below is code of component.

Template

<form action="" [formGroup]="LoginForm">

<mat-form-field class="example-full-width" formControlName="loginFormControl">
<mat-label>Login</mat-label>
<input matInput placeholder="" value="">
</mat-form-field>

<p> Value: {{ LoginForm.value | json }}</p>
<label for="">Пароль</label>

<mat-form-field class="example-full-width" formControlName="passwordFormControl">

<mat-label>Password</mat-label>
<input matInput placeholder="">

</mat-form-field>
<!-- <p> Value {{ loginForm.value.loginFormControl}}</p> -->
<p> Value {{ LoginForm.value }}</p>

<button type="submit">Увійти</button>


Component

import { Component, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';
import {FormsModule, ReactiveFormsModule,FormControl, FormGroup, FormBuilder } from '@angular/forms';

@Component({
selector: 'app-loginpage',
imports: [RouterOutlet,
FormsModule,
ReactiveFormsModule,
CommonModule,
MatFormFieldModule,
MatInputModule],
templateUrl: './loginpage.component.html',
styleUrl: './loginpage.component.css',
standalone: true
})

export class LoginpageComponent {



constructor(private fb: FormBuilder) {};

LoginForm!: FormGroup;
// LoginForm = new FormGroup ({

// loginFormControl: new FormControl(''),
// passwordFormControl: new FormControl('')

// });

ngOnInit(): void {
this.LoginForm = this.fb.group (
{
loginFormControl: new FormControl(''),
passwordFormControl: new FormControl('')
}
)
}


}

Continue reading...