Angular, как разместить данные с помощью кнопки, используя (изменить) детектор?

Question

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

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

Файл машинописного текста:

// 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');
        }
      );
  }

Я пытался вызвать метод:

<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

В дополнение к ответу @Moslem измените тип кнопки с submit на button

<button type="button" .. > instead of <button type="submit" ...>

Answer 2

Конфликт с использованием routerLink routerLink="/menu" и события click.

изменить маршрут при обратном ответе.

Внедрить router: Router Класс и использовать this.router.navigateByUrl(url: string) Маршрутизатор

 constructor(private router: Router){
  }


  public saveCode(e): void{
    // 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

          this.router.navigateByUrl("/menu")
        },
        err => {
          console.log('Error occured');
        }
      );
  }