component html file:

<div class="row g-2 mt-4 ml-2">

  <form [formGroup]="animalForm" (ngSubmit)="animalSubmit()" id="animalForm" class="row g-3">

    <div class="col-md-4">
      <div class="form-floating">
        <input type="text" class="form-control" id="id" placeholder="Enter Animal ID"             formControlName="id" />
      </div>
    </div>

    <button type="submit" class="btn btn-primary col-3 mt-4 ml-3"> Create New Animal </button>

  </form>

</div>

app-component.ts file

import { Component } from '@angular/core';
import { ServiceService } from '../service.service';
import {
FormGroup,
FormControl,
ReactiveFormsModule,
Validators,
} from '@angular/forms';

@Component({
selector: 'app-create',
standalone: true,
imports: [ReactiveFormsModule],
templateUrl: './create.component.html',
styleUrl: './create.component.css',
})
export class CreateComponent {
constructor(private api: ServiceService) { }

ngOnInit(): void {

}

animalForm = new FormGroup({
id: new FormControl('', Validators.required),
name: new FormControl('', Validators.required),
description: new FormControl('', Validators.required),
created_At: new FormControl(() => new Date().toISOString()),
updated_At: new FormControl(() => new Date().toISOString()),
});

animalSubmit() {
console.log('hey');
console.log(this.animalForm.value);
}
}

So obviously I’m trying to print out my submitted inputs to the console. However, I get no output to the console. That “console.log(‘hey’)” is there because THAT doesn’t even print out. When I submit the form, nothing happens. It doesn’t look like ngSubmit is working and calling my animalSubmit() but I have all the imports in my module.ts form. Why isn’t the form submitting and calling my function? keep in mind, this “animal” data i’m supposed to send back to in my MySql Database. I’m watching a year old video of this guy doing the basics, because somewhere in my old project my CRUD functions got all messed up, so I restarted basically and am watching how this guy did it. It all works out fine for him. But I have a newer version of angular (18) and things don’t work sometimes like how his does.

YouTube video: https://www.youtube.com/watch?v=qjVpnGz862o%60