Based on your code example, you are creating the URL during ngOnInit(), which occurs before you click your button to call onSubmit()

You would need to try something like this.

 onSubmit() {
    this.zipcode = this.zipForm.value.zipCode;
    console.log(this.zipcode);

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

  }

An issue has been that when I click submit, the page reloads without using the zip code to format the URL.

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

};

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

    <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>

Here’s the 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
  }
}