ZipLocation

Example:

• Inject service into component via the providers array
• add service to constructor
• pass AbstractControl arguments to the buildZipLocation() - ORDER MATTERS
• pass null as an argument for controls that do not need to be provided
• Zip Code is required

In you TS file:

import {ZipLocationService} from 'zip-location';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ZipLocationService]
})
export class AppComponent implements OnInit {
  form: FormGroup;

  get countyList$() {
    return this.zipLocationService.countyList$;
  }

  constructor(private fb: FormBuilder,
              private zipLocationService: ZipLocationService) {
  }

  ngOnInit(): void {
    this.form = this.fb.group({
      zipCode: null,
      county: null,
      countyFips: null,
      city: null,
      state: null
    });
    this.buildGetCounties();
  }

  buildGetCounties() {
    this.zipLocationService.buildZipLocation(
      this.form.get('zipCode'),
      this.form.get('county'),
      this.form.get('countyFips'),
      this.form.get('state'),
      this.form.get('city'),
    );
  }
}

In your template:

<form [formGroup]="form">
    <div>
      <label>Zip Code</label>
      <input type="text" formControlName="zipCode">
    </div>
    <div>
      <label>City</label>
      <input type="text" formControlName="city">
    </div>
    <div>
      <label>State</label>
      <input type="text" formControlName="state">
    </div>
    <div>
      <label>County Name</label>
      <select formControlName="county">
        <option [value]="null">Select County</option>
        <option *ngFor="let county of countyList$ | async"
                [value]="county.county_name">{{county.county_name + ' - ' + county.county_code}}</option>
      </select>
    </div>
</form>

buildZipLocation()

• example of null value in buildZipLocation()

  buildGetCounties() {
    this.zipLocationService.buildZipLocation(
      this.form.get('zipCode'),
      this.form.get('county'),
      null,
      this.form.get('state'),
      null,
    );
  }