Solution 1 :

To get a value inside a FormGroup, you first need to get the form control inside the form group to then get its value. So you need to do this:

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

Problem :

Basically, I want to take the zip code in the form, format a URL, make an API call on that URL, and then print data from the JSON to the screen.

I’m already formatting a URL and getting the data I need.
The problem is that I can’t get the form data to store in a variable, and use that to format my URL.

Here’s component.ts:

import { WeatherdataService } from '../services/weatherdata.service';
import { THIS_EXPR } from '@angular/compiler/src/output/output_ast';
import { FormControl,FormGroup } from '@angular/forms';
  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;
  //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() {
       // add zip code to .getWeather call = data;
      this.temp =; =;
      this.dry_da = Math.round(3.28084 * this.ISAT/0.0065 *(1 - ((** (this.expon)));


Here’s compnonent.html:
(I tried using ngSubmit(), but the submit button reloads my page, and nothing shows up.

        Zip Code:
        <input type="text" [formControl]='zipCode'>
    <button type="button" (click)="onSubmit()">Submit</button>
<div *ngIf = 'zipForm'>
    <p>Current Zip: {{ zipCode.value }}</p>
<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>

Here’s the service.ts:

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

  providedIn: 'root'
export class WeatherdataService {
  API_KEY = 'blahblahblah';

  constructor(private httpClient: HttpClient) { }

  public getWeather(zipcode){ // getWeather(zipcode)
    return this.httpClient.get(
);  // where to format with zip code


Comment posted by Nicholas K

Any errors on the console?