Как получить значение поля ввода в функции через angular?

Question

Я определил поле ввода, как показано ниже:

    <label>Enter more months</label>
    <input #mname type='text' id="mname" >
    <button (click)="addMonth(mname.value)" style="height: 30px;"></button>

при нажатии на кнопку я хочу, чтобы значение поля ввода было напечатано на консоли, для которого я определяю функцию, как показано ниже :

    addMonth(mname){
        console.log(mname.value);
    }

Но я не могу передать значение поля. Как я могу это сделать?

Answer 1

вы передаете значение, а не ссылку на элемент ввода

<button (click)="addMonth(mname.value)" style="height: 30px;">

теперь у вас есть само значение

addMonth(value :string){
    console.log(value);
}

если вы передаете ссылку на элемент, как это (click)="addMonth(mname)", то вы может получить доступ к значению свойства

addMonth(elm :HTMLInputElement){
    console.log(elm.value);
} 

Answer 2

Используйте для этого ngModel .

Также, пожалуйста, посмотрите на приведенный ниже код, найденный по этой ссылке.

В вашем html

<input [(ngModel)]="name" #ctrl="ngModel" required>

В вашем компоненте, пожалуйста, добавьте определение для вашего ввода , например,

name: string = '';

Это называется двойной привязкой, и любое изменение на входе будет отражено в переменной.