Angular form not binding functions properly

I tried making this little form and intent to call a function when submitting, but it won't do call even the starting console.log.

Worth noting, nothing is being logged, not the console.logs inserted, nor browser console errors, on the DOM the form element appears without the onSubmit property. I tried using 2 functions with different submit approaches but neither worked. This is a child component of the root component and the root component has nothing other than imports.

This is the html `

<div class="container">
<form [formGroup]="users" (ngSubmit)="onSubmit()" (submit)="logEvent($event)" >
<input type="text" formControlName="user" id="user" style="display: block;">
<input type="text" formControlName="pword" id="pword" style="display: block;">
<input type="text" formControlName="nombre" id="nombre" style="display: block;">
<input type="text" formControlName="rol" id="rol" style="display: block;">
<button type="submit">submit</button>
</form>
</div>




And this is the component.ts file

@Component({
selector: 'app-create-user',
standalone: true,
imports: [CommonModule, ReactiveFormsModule, FormsModule],
templateUrl: './create-user.component.html',
styleUrls: ['./create-user.component.css']
})
export class CreateUserComponent implements OnInit{
users;

constructor( private userService: UserService, private fb: FormBuilder ) {
this.users = this.fb.group({
user:'',
pword:'',
nombre:'',
rol:'',
});


}

async onSubmit(): Promise<void> {

console.log('on submit called')
console.log(this.users.value);
if (this.users.valid) {
console.log('valid form');
}
};

ngOnInit(): void {
//console.log(this.users);
}

logEvent(event: Event) {
console.log('log event', event);
}
}

Continue reading...