Angular 8: Попытка использовать данные формы для форматирования строки в службе, но страница продолжает перезагружаться, переменная не переназначает значение формы

Question

Обычно я хочу взять почтовый индекс в форме, отформатировать URL-адрес, выполнить вызов API для этого URL-адреса, а затем распечатать данные с JSON на экране.

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

Вот здесь component.ts:

import { WeatherdataService } from '../services/weatherdata.service';
import { THIS_EXPR } from '@angular/compiler/src/output/output_ast';
import { FormControl,FormGroup } from '@angular/forms';
@Component({
  selector: 'app-dailyda',
  templateUrl: './dailyda.component.html',
  styleUrls: ['./dailyda.component.scss']
})
export class DailydaComponent implements OnInit {

  zipForm = new FormGroup({
    zipCode:new FormControl('37064') //Default value in quotes
  })
  zipcode = 60610;
  onSubmit() {
    this.zipcode = this.zipForm.value.zipCode;
    console.log(this.zipcode);
  }
  weather;
  temp;
  press;
  dry_da;
  //Crunch your numbers here, store it in a variable called result, etc.,
  //And in the template, {{ result }} will display that number.
  ISAT = 288.15;
  ISAP = 1013.25;
  expon = 0.234978134;
  // lapse_rate = 0.0065;
  // R = 8.3144598; Replaced all this with expon
  // g = 9.80665;
  // M = 0.028964; // This is the molar mass of DRY air.



  constructor(private weatherdataService: WeatherdataService) { }

  ngOnInit() {
    this.weatherdataService.getWeather(this.zipcode).subscribe((data)=>{
       // add zip code to .getWeather call
      this.weather = data;
      this.temp = this.weather.main.temp;
      this.press = this.weather.main.pressure;
      this.dry_da = Math.round(3.28084 * this.ISAT/0.0065 *(1 - ((this.press/this.ISAP)/(this.temp/this.ISAT))** (this.expon)));
    }
    )};

};

Вот компонент. html: (Я попытался с помощью ngSubmit (), но кнопка отправки перезагружает мою страницу, и ничего не появляется.

    <label>
        Zip Code:
        <input type="text" [formControl]='zipCode'>
    </label>
    <button type="button" (click)="onSubmit()">Submit</button>
</form>
<div *ngIf = 'zipForm'>
    <p>Current Zip: {{ zipCode.value }}</p>
</div>
<div *ngIf = "weather"> <!-- *ngIf prevents errors, because of the 
delay in retrieving JSON from the API. Once weather has a value, this 
div is displayed.-->
    <h4> Density Altitude (assumes dry air): </h4>
    <h2><strong>{{ dry_da }} ft</strong></h2>
    <h4> Temp in Kelvins: </h4>
    <h2><strong>{{ temp }}</strong></h2>
    <h4> Static Atmospheric Pressure in hPa: </h4>
    <h2><strong>{{ press }}</strong></h2>
</div>

Вот service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class WeatherdataService {
  API_KEY = 'blahblahblah';

  constructor(private httpClient: HttpClient) { }

  public getWeather(zipcode){ // getWeather(zipcode)
    return this.httpClient.get(
`https://api.openweathermap.org/data/2.5/weather?zip=${zipcode}&appid=${this.API_KEY}` 
);  // where to format with zip code
  }
}

Answer 1

Чтобы получить значение внутри FormGroup, сначала необходимо получить элемент управления формы внутри группы форм, а затем получить его значение. Так что вам нужно сделать это:

this.zipcode = this.zipForm.get('zipCode').value;