угловой 4 материал, поле ввода и ошибка связи службы

Question

Проблема в следующем.Эта форма имеет 2 поля ввода пользователя, и если я отправляю форму, компонент отправляет те же данные из полей ввода в службу.Форма всегда отправляет первый контент.Например, я отправляю следующее: username = User, note = Note, я вернул username = User, note = User.

Я думаю, что проблема в моем компоненте, где я определяю noteText.value, но не могу найти правильный путь.

Service.ts

postNote(note){
            var headers = new Headers();
            headers.append('Content-Type', 'application/json');
            return this.http.post('http://localhost:3000/api/postnotes', JSON.stringify(note), {headers: headers})
                .map(res => res.json());
        }

Component.ts

postNote(event, noteText,){
    var result;
    var newNote = {
      note: noteText.value,
      country: noteText.value,
      username: noteText.value 
    };

    result = this.notesService.postNote(newNote);
    result.subscribe(x => {
      this.notes.push(newNote);
      noteText.note = '';
      noteText.username = '';
    });
  }

Component.html

<div class="example-container">
        <mat-form-field>
          <input matInput placeholder="username" [value]="username" autofocus #noteText>   
        </mat-form-field>
        <mat-form-field>
          <input matInput placeholder="note" [value]="note" autofocus #noteText> 
        </mat-form-field>
        <button (click)="postNote($event, noteText)">Click me !</button>
      </div>

Answer 1

использование ngModel вместе с noteText.username переменная

 <input matInput placeholder="username" [(ngModel)]="noteText.username" [value]="username" autofocus #noteText>