передать "html input value" в угловой процесс

Question

Я в тупике на этом этапе. У меня есть данные, которые я собираю, и которые я хотел бы использовать для обработки через угловой компонент. Хотя у меня есть имя значения в операторе ввода HTML, мне нужен способ передать это значение в процесс .ts, в котором я буду его использовать. Пока что все, что я получаю, это "undefined".

app.component.html

<div>
  Common Name:
  <input name="commonName" value="">
  <p>
    <button (click)="assignName(commonName)">Submit</button>
    </p>
</div>
<router-outlet></router-outlet>

Процесс здесь:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  assignName (commonName: string) {
    console.log("value received: " + commonName);
  }

}

Когда я запускаю его, я получаю в консоли следующее:

app.component.ts:11 value received: undefined

Если я набираю тестирование во вводе и нажимаю «Отправить», я хотел бы, чтобы полученное значение сообщалось в том виде, в котором оно было напечатано («тестирование»)

Снимок окна запуска

Answer 1

Создайте переменную шаблона в input, и затем вы сможете использовать ее свойство value при вызове метода assignName.

Примерно так:

<div>
  Common Name:
  <input #commonName name="commonName" value="">
  <p>
    <button (click)="assignName(commonName.value)">Submit</button>
    </p>
</div>

---

Вот Рабочий образец StackBlitz для вашего исх.