Angular form does not take value typed in input

Question

I’m having a problem where the angular is not assigning value to the variable of an input field of mine.

Follows the code:

Component.html

 <div class="row justify-content-center" id="formulario">
    <form class="form-inline" (submit)="findRegister(nameInput.value)">
      <input #nameInput type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" placeholder="Jane Doe">
      <button type="submit" class="btn btn-primary">Pesquisar</button>
    </form>
  </div>

Component.

import { Component, OnInit } from '@angular/core';
import { DataService } from '../services/data.service';
@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
  offset:number;
  registers:Register[];

  constructor(private dataService:DataService) { }

  findRegister(value){
    this.dataService.getRegisters(value, this.offset).subscribe(registers => {
      this.registers = registers.data;
      console.log(this.registers);
    }, err => {
      console.log(err);
    });
  }
  ngOnInit() {
    this.offset=1;
    this.findRegister("Luiz");
  }
  incrementOffset(){
    this.offset++;
    this.findRegister("luiz");
  }
  decrementOffset(){
    this.offset--;
    this.findRegister("luiz");
  }

}
interface Register{
  id: string,
  name: string,
  username: string;
}

I made some calls to findRegister passing a string just to test the service, which is working all ok.

Answer 1

Try to change the (submit) for (ngSubmit).

<div class="row justify-content-center" id="formulario">
  <form class="form-inline" (ngSubmit)="findRegister(nameInput.value)">
    <input #nameInput type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" placeholder="Jane Doe">
    <button type="submit" class="btn btn-primary">Pesquisar</button>
  </form>
</div>

---

UPDATE

I suggest you use the Template-Driven Form because the changes will be minimal in your code.

You will need:

• Import FormsModule of @angular/forms
• Create a template variable in your <form> and assign the value ngForm to her. Ex: <form #searchForm="ngForm">
• Assign a name to your input using the attribute name and put the directive ngModel in it. Ex: <input type="text" name="name" ngModel />
• Then you pass the Submit method by parameter searchForm.value.name. Ex: <form #searchForm="ngForm" (ngSubmit)="findRegister(searchForm.value.name)">

Example:

<div class="row justify-content-center" id="formulario">
  <form class="form-inline" #searchForm="ngForm (ngSubmit)="findRegister(searchForm.value.name)">
    <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" placeholder="Jane Doe" name="name" ngModel>
    <button type="submit" class="btn btn-primary">Pesquisar</button>
  </form>
</div>