- 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
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'),
);
}
}
<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>
- example of
null
value in buildZipLocation()
buildGetCounties() {
this.zipLocationService.buildZipLocation(
this.form.get('zipCode'),
this.form.get('county'),
null,
this.form.get('state'),
null,
);
}