angular6: передача значения поля ввода компоненту

Question

Я пытаюсь передать значение поля ввода в класс компонента. Но, похоже, это не работает. Пожалуйста, найдите код ниже:

todoinput.component.html

<mat-card>
  <form>
    <mat-form-field class="example-full-width">
      <input matInput type="text" name="todo" placeholder="Enter a todo">
    </mat-form-field>
    &nbsp; &nbsp;
    <button mat-raised-button color="primary" type="button" (click)="addTodo(todo.value)">Add Todo
    </button>
  </form>
</mat-card>

todoinput.component.ts

  addTodo(text) {
    this._todosService.addTodo({
      text: text,
    }).subscribe((todo) => {
      return this.newTodo.emit(todo);
    })
  }

Но нажатие на кнопку приводит к ошибке ниже:

ERROR TypeError: Cannot read property 'value' of undefined
    at Object.eval [as handleEvent] (TodoinputComponent.html:7)
    at handleEvent (core.js:10258)

Я использую угловой материал для рендеринга элементов. Кто-нибудь может дать мне знать, что я здесь делаю не так?

Спасибо

Answer 1

Использовать #todo в элементе:

<input matInput type="text" name="todo" #todo placeholder="Enter a todo">

И использовать:

{{ todo.value }}

Answer 2

Альтернатива, с которой, мне кажется, будет проще работать, - это иметь вспомогательное поле и привязать к нему:

HTML:

<mat-card>   
  <form>
    <mat-form-field class="example-full-width">
      <input [(ngModel)]="todo" matInput type="text" name="todo" placeholder="Enter a todo">
    </mat-form-field>
    &nbsp; &nbsp;
    <button mat-raised-button color="primary" type="button" (click)="addTodo()">Add Todo
    </button>   
  </form> 
</mat-card>

ц

todo = '';

addTodo() {
    if (!this.todo) {
       return;
    }

    this._todosService.addTodo({
      text: this.todo,
    }).subscribe((todo) => {
      this.todo = '';
      return this.newTodo.emit(todo);
    })
  }

Таким образом, проще выполнять такие действия, как проверка, что они ввели значение, и сбросить поле на пустое после успешной отправки.

Answer 3

Попробуйте добавить #todo к входу. После этого угловой должен иметь доступ к правильному входу. Без этого он получает неопределенную переменную.

<mat-card>
  <form>
    <mat-form-field class="example-full-width">
      <input #todo matInput type="text" name="todo" placeholder="Enter a todo">
    </mat-form-field>
    &nbsp; &nbsp;
    <button mat-raised-button color="primary" type="button" (click)="addTodo(todo.value)">Add Todo
    </button>
  </form>
</mat-card>