Почему (щелчок) не отправляет мои данные внутри <button>, а (изменение) внутри <input>- в Angular, HTML

Question

Я хочу отправить некоторые данные на мой RESTful-сервер Glassfish.Когда я использую (изменяю) внутри тега ввода, он активирует метод и успешно отправляет данные, но когда я использую (щелкаю) или (изменяю) для активации метода, он ничего не делает.Я пытался разделить метод отправки данных и метод маршрутизатора, но безрезультатно.Как я могу решить эту проблему?

HTML-файл:

<div class="container py-5">
  <div class="row">
    <div class="col-md-12">
      <div class="row">
        <div class="col-md-6 mx-auto">
          <div class="card rounded-0">
            <div class="card-header">
              <h3 class="mb-0">Organize</h3>
            </div>
            <div class="form-group">
              <label for="codes" class="m-2">Choose a restaurant:</label>
              <form #f="ngForm">
                <input
                  type="text"
                  list="codes"
                  class="m-2"
                  (change)="saveCode($event)"
                  >
                <datalist id="codes">
                  <option *ngFor="let c of codeList" [value]="c.name">{{c.name}}</option>
                </datalist>
              <button
                type="button"
                class="btn btn-primary btn-lg float-none m-2"
                id="btnAanmaken"
                (click)="routerRed()"
              >Aanmaken</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

машинописный файл:

import {Component, OnInit, ViewChild} from '@angular/core';
import {Router} from "@angular/router";
import {NgForm} from "@angular/forms";
import {HttpClient, HttpHeaders} from "@angular/common/http";
@Component({
  selector: 'app-organize',
  templateUrl: './sendinvite.component.html',
  styleUrls: ['./sendinvite.component.css']
})
export class SendinviteComponent implements OnInit {

  // public codeValue: string;

  // List of restaurants
  codeList = [
    { name: 'Mcdonalds', address: 'Kalverstraat 5' },
    { name: 'Kentucky Fried Chicken', address: 'Kalverstraat 4' },
    { name: 'Burger King', address: 'Kalverstraat 3' },
    { name: 'Dominos pizza', address: 'Kalverstraat 2' },
    { name: 'New York Pizza', address: 'Kalverstraat 1' }
  ];

// Assign empty value to id, name and address
  @ViewChild('f', { static: true }) form: NgForm;


  restaurant = {
    name: ' ',
    address: ' '
  };

  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/json',
      Authorization: 'my-auth-token'
    })
  };


  constructor(private http: HttpClient, private router: Router) {
  }

  ngOnInit() {
  }

// Method to post data to backend
  public saveCode (e): void {
    const name = e.target.value;
    const list = this.codeList.filter(x => x.name === name)[0];


    this.restaurant.name = list.name;
    this.restaurant.address = list.address;

    console.log(list.name);
    console.log(list.address);


// Additional information to the server content type
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json'
      })
    };
// Making an array with the values of the restaurant
    const data = {
      name: list.name,
      address: list.address
    };

    console.log(data);

// POST method
    this.http.post('http://localhost:8080/aquadine-jee/resources/restaurant',
      JSON.parse(JSON.stringify(data)) , httpOptions)

    // wait till it gets posted to the backend
      .subscribe( // subscribe to observable http.post
        res => {
          console.log("response" + " " + res); // log results otherwise log error
        },
        err => {
          console.log('Error occured');
        }

      );


  }

  routerRed(){
    this.router.navigateByUrl('/menu');
  }

Я пытался использовать:

<button 
                type="submit" 
                class="btn btn-primary btn-lg float-none m-2" 
                id="btnAanmaken"
                routerLink="/menu"
                (change)="saveCode($event)"
                >Aanmaken</button>

и:

<button 
                type="submit" 
                class="btn btn-primary btn-lg float-none m-2" 
                id="btnAanmaken"
                routerLink="/menu"
                (click)="saveCode($event)"
                >Aanmaken</button>

Answer 1

Событие (change) не будет вызвано нажатием кнопки, поскольку «изменение» как таковое отсутствует. Вы должны использовать (click) вместо этого. Причина, по которой ваш saveCode() не вызывается, когда вы устанавливаете routerLink и (click), заключается в routerLink. Когда вы нажимаете кнопку, Angular перемещается на /menu, прежде чем инициирует событие щелчка. Вы можете перейти от своего компонента в saveCode().

Поскольку у вас также есть вызов API в вашем saveCode(), вероятно, будет лучше, если вы перейдете к успеху, поскольку может не иметь смысла перенаправлять пользователя в случае сбоя вызова API (особенно, если новый маршрут зависит на сохраненные данные)

Попробуйте это в своем коде.

HTML

<button type="submit"
  class="btn btn-primary btn-lg float-none m-2"
  id="btnAanmaken"
  (click)="saveCode($event)">
  Aanmaken
</button>

компонент

.subscribe( // subscribe to observable http.post
  res => {
    console.log("response" + " " + res); // log results otherwise log error
    this.router.navigateByUrl('/menu');
  },
  err => {
    console.log('Error occured');
  });

Редактировать : Вместо того, чтобы использовать $event для передачи значений в компонент, вы можете использовать ngForm, который вы использовали в своем коде вместе с ngModel.

компонент

<input type="text"
  list="codes"
  class="m-2"
  name="restaurantName"
  ngModel
>

компонент

  @ViewChild('f', { static: true }) form: NgForm;

  ...

  public saveCode (): void {
    const name = this.form.value.restaurantName;
    ...
  }

Вот еще один пример из документации о том, как связать значения с формой, используя ngForm и ngModel

Answer 2

Событие (change) внутри кнопки ничего не даст, (click) более уместно, но $event, переданное внутри события щелчка, вернет информацию о самом щелчке (положении мыши и т. Д.). ).

Что вы должны сделать, это при каждом вызове щелчка получить значение формы и отправить его в функцию saveData. (Может быть, что-то вроде saveData(this.f.value), но я не могу с уверенностью сказать)

У меня нет опыта работы с шаблонно-управляемыми формами, может быть, стоит взглянуть на Реактивные формы , это облегчит вашу жизнь ИМХО