Console input value

Template

<form [formGroup]="form" (ngSubmit)="onSubmit()" class="card">
  <div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input
      formControlName="formEmail"
      type="email"
      class="form-control"
      id="email"
      aria-describedby="emailHelp"
    />
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input
      formControlName="formPassword"
      type="password"
      class="form-control"
      id="password"
    />
  </div>
  <button type="submit" class="btn btn-dark">Submit</button>
</form>

Component

form = new FormGroup({
    formEmail: new FormControl(),
    formPassword: new FormControl(),
  });

  onSubmit() {
    if (this.form) {
      const email = this.form.get('formEmail')?.value;
      const password = this.form.get('formPassword')?.value;
      console.log(email, password);
    }
  }

Component

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
})
export class AddStudentComponent {
  loginForm = new FormGroup({
    firstName: new FormControl(''),
  });
  firstName?: string;
  onSubmit() {
    if (this.loginForm) {
      const firstNameValue = this.loginForm.get('firstName')?.value;
      console.log(firstNameValue);
    }
  }
}

Template

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <div class="mb-3">
    <label for="firstName" class="form-label">First Name</label>
    <input
      formControlName="firstName"
      type="text"
      class="form-control"
      id="firstName"
    />
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>