devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

如何根据美国的邮编带出对应的州呢_输入邮编对应 州

作者：IT小白 | 2024-04-28 02:23:04

赞

踩

输入邮编对应 州

项目中没有维护这个对应关系的API，所以我google到了Google map的API，只需要发get请求发送邮编即可。api地址是
http://maps.googleapis.com/maps/api/geocode/json?address=xxx,这里的address就是接受的邮编。
所以现在需求是：用户输入邮政编码后请求该API得到对应的州和city，然后渲染到对应的字段中。
create-client.component.html

  1. <!-- client form -->
  2. <div animated fadeIn>
  3.   <form class="client-form" class="form-horizontal" [formGroup]="orgForm">
  4.     <div class="row">
  5.       <div class="col-md-10">
  6.         <div class="card">
  7.           <div class="card-header"><strong>Account Information</strong></div>
  8.           <div class="card-body">
  9.             
  10.             <div class="row">
  11.               <label for="country"
  12.                      class="col-md-3 form-control-label required-label"><span class="asterisk">*</span>Country:</label>
  13.               <div class="col-md-9">
  14.                 <select style="height: 34px;" class="col-md-5 form-control" id="country" name="country" formControlName="country">
  15.                   <option *ngFor="let country of countries"
  16.                           [value]="country">
  17.                     {{ country }}
  18.                   </option>
  19.                 </select>
  20.               </div>
  21.             </div>
  22.  
  23.             <div class="row">
  24.               <label for="postal"
  25.                      class="col-md-3 form-control-label required-label"><span class="asterisk">*</span>Postal Code:</label>
  26.               <div class="col-md-9">
  27.                 <input id="postal" name="postal"
  28.                        class="col-md-5 form-control"
  29.                        formControlName="postal"
  30.                        placeholder="Enter Client Postal Code" (change)="onPostalChange($event)" >
  31.                 <span class="col-md-5 login-error-alert" *ngIf="this.isFormInputInvalid('postal') &&
  32.                 this.orgForm.get('postal').hasError('required')">Postal Code is required</span>
  33.  
  34.                 <span class="col-md-5 login-error-alert" *ngIf="this.isFormInputInvalid('postal') &&
  35.                 !this.orgForm.get('postal').hasError('required') &&
  36.                 this.orgForm.get('postal').hasError('pattern')">Postal Code must be a 5 digit number</span>
  37.  
  38.                 <span class="col-md-5 login-error-alert" *ngIf="this.isPostalCodeInvalid &&
  39.                 !this.orgForm.get('postal').hasError('pattern') &&
  40.                 !this.orgForm.get('postal').hasError('required')">Postal Code is not available</span>
  41.               </div>
  42.             </div>
  43.  
  44.             <div class="row">
  45.               <label for="city"
  46.                      class="col-md-3 form-control-label required-label"><span class="asterisk">*</span>City:</label>
  47.               <div class="col-md-9">
  48.                 <input id="city" name="city" [(ngModel)]="cityName"
  49.                        class="col-md-5 form-control"
  50.                        formControlName="city"
  51.                        placeholder="Enter Client City">
  52.                 <span class="col-md-5 login-error-alert" *ngIf="this.isFormInputInvalid('city') &&
  53.                 this.orgForm.get('city').hasError('required')">City is required</span>
  54.                 <span class="col-md-5 login-error-alert" *ngIf="this.isFormInputInvalid('city') &&
  55.                 this.orgForm.get('city').hasError('pattern')">City cannot exceed 40 characters</span>
  56.               </div>
  57.             </div>
  58.  
  59.             <div class="row">
  60.               <label for="state"
  61.                 class="col-md-3 form-control-label required-label"><span class="asterisk">*</span>State:</label>
  62.               <div class="col-md-9">
  63.                 <select style="height: 34px;" class="col-md-5 form-control" id="state" formControlName="state"
  64.                          [(ngModel)]="stateAbbreviation" (ngModelChange)="onStateChange($event)">
  65.                   <option *ngFor="let state of stateItems"
  66.                           [value]="state">
  67.                     {{ state }}
  68.                   </option>
  69.                 </select>
  70.                 <div *ngIf="orgForm.get('state').touched || orgForm.get('state').dirty">
  71.                   <span class="col-md-5 login-error-alert" *ngIf="this.isFormInputInvalid('state') &&
  72.                          this.orgForm.get('state').hasError('required')">State is required</span>
  73.                   <span class="col-md-5 login-error-alert" *ngIf="this.isStateValueMismatchWithPostalCode"> Postal Code and State Mismatch</span>
  74.                 </div>
  75.               </div>
  76.             </div>
  77.       </div>
  78.     </div>
  79.     <div class="modal-footer col-md-10">
  80.       <div class="col-md-9">
  81.         <div class="col-md-5">
  82.           <button type="button" class="btn btn-dark-rs6 col-md-5" id="reset-button-modal"
  83.                   (click)="orgForm.reset()" style="margin-left: -24px">Reset
  84.           </button>
  85.           <button type="submit" class="btn btn-green-rs6 col-md-5" id="submit-button-modal"
  86.                   [disabled]="!orgForm.valid || this.isStateValueMismatchWithPostalCode || isPostalCodeInvalid" (click)="onSubmit()"
  87.                   style="float: right; margin-right: -15px">Create
  88.           </button>
  89.         </div>
  90.       </div>
  91.     </div>
  92.   </form>
  93. </div>

子类：create-client.component.ts
 

  1. import { Component } from '@angular/core';
  2. import { FormBuilder, Validators } from '@angular/forms';
  3. import { ActivatedRoute, Params, Router } from '@angular/router';
  4. import { Location } from '@angular/common';
  5. import { Account } from '../../model/account.model';
  6. import { PaymentTermList } from '../../model/payment-term-list.model';
  7. import { PricingPackage } from '../../model/pricing-package.model';
  8. import { Processor } from '../../model/processor.model';
  9. import { RequestBilling } from '../../model/request-billing.model';
  10. import { User } from '../../model/user.model';
  11. import { DialogService } from '../../service/dialog.service';
  12. import { OrganizationService } from '../../service/organization.service';
  13. import { CreateOrganizationComponent } from '../create-organization/create-organization.component';
  14. import {Regex} from '../../model/regex.model';
  15. import { OrganizationType } from '../../model/organization-type.model';
  16. import {UtilService} from '../../service/util.service';
  17. import {Constants} from '../../utility/constants';
  18. import {Utility} from '../../utility/utility';
  19.  
  20. @Component({
  21.   selector: 'app-create-client',
  22.   templateUrl: 'create-client.component.html'
  23. })
  24.  
  25. export class CreateClientComponent extends CreateOrganizationComponent {
  26.   account: Account = {
  27.     soldBy: '', ownedBy: '', address: {
  28.       address1: '', address2: '', city: '', state: '', country: '', postal: ''
  29.     }, emailAddress: '', locale: {language: {cultureName: ''}},
  30.     processorList: [{name: ''}]
  31.   };
  32.  
  33.   countries: string[] = [];
  34.   stateItems: string[] = [];
  35.  
  36.   constructor(private fb: FormBuilder, route: ActivatedRoute, dialogService: DialogService,
  37.               organizationService: OrganizationService, utilService: UtilService,
  38.               router: Router, location: Location, regex: Regex) {
  39.     super(route, dialogService, organizationService, router, location, regex, utilService);
  40.     this.createForm();
  41.     this.title = 'Client Creation';
  42.     this.route.queryParams.subscribe((params: Params) => {
  43.       this.clientId = params['clientId'];
  44.       this.parentOrganizationId = params['parentOrganizationId'];
  45.     });
  46.     this.initProcessorList();
  47.     this.organizationService.getPaymentTerms().subscribe(
  48.       (paymentTermList: PaymentTermList) => this.paymentTermList = paymentTermList);
  49.  
  50.     this.utilService.getCountries().subscribe(
  51.       (countries: string[] ) => this.countries = countries);
  52.  
  53.     this.utilService.getStates().subscribe(
  54.       (states: string[] ) => this.stateItems = states);
  55.   }
  56.  
  57.  
  58.   onSubmit() {
  59.     this.updateModel();
  60.     super.onSubmit(OrganizationType.Client);
  61.   }
  62.  
  63.   updateModel() {
  64.     
  65.     this.model.account.address.city = this.orgForm.get('city').value;
  66.     this.model.account.address.state = this.orgForm.get('state').value;
  67.     this.model.account.address.postal = this.orgForm.get('postal').value;
  68.     this.model.account.address.country = Utility.convertSpecificCountryNameInShort(this.orgForm.get('country').value);
  69.  
  70.     this.model.account.processorList = [];
  71.     for (const processor of this.processors) {
  72.       if (processor['checked']) {
  73.         const p: Processor = {name: processor['name']};
  74.         this.model.account.processorList.push(p);
  75.       }
  76.     }
  77.   }
  78.  
  79.   onPostalChange($event) {
  80.     this.onPostalChanges(this.orgForm.get('postal').value);
  81.   }
  82.  
  83.   private createForm() {
  84.     this.orgForm = this.fb.group({
  85.       
  86.       state: ['', [Validators.required, Validators.pattern(this.regex.state)]],
  87.       city: ['', [Validators.required, Validators.pattern(this.regex.city)]],
  88.       country: ['', [Validators.required]],
  89.       postal: ['', [Validators.required, Validators.pattern(this.regex.postalCode)]],
  90.     );
  91.   }
  92. }

父类：create-organization.component.ts

 

  1. import { HttpErrorResponse, HttpResponse, HttpResponseBase } from '@angular/common/http';
  2. import { Component, ViewChild, ElementRef } from '@angular/core';
  3. import { AbstractControl, FormGroup } from '@angular/forms';
  4. import { ValidationErrors } from '@angular/forms/src/directives/validators';
  5. import { ActivatedRoute, Params, Router} from '@angular/router';
  6. import { Location } from '@angular/common';
  7. import { Observable } from 'rxjs/Observable';
  8. import { Organization } from '../../model/organization.model';
  9. import { Regex } from '../../model/regex.model';
  10. import { DialogService } from '../../service/dialog.service';
  11. import { OrganizationService } from '../../service/organization.service';
  12. import { Utility } from '../../utility/utility';
  13. import { OrganizationType } from '../../model/organization-type.model';
  14. import { UtilService } from '../../service/util.service';
  15.  
  16. @Component({
  17.   selector: 'app-create-organization',
  18.   templateUrl: 'create-organization.component.html'
  19. })
  20. export class CreateOrganizationComponent {
  21.   parentOrganizationUserName = '';
  22.   parentOrganizationId: number;
  23.   orgForm: FormGroup;
  24.  
  25.  
  26.   stateAbbreviationFirstValue = '';
  27.   isFirstTimeToChoose = true;
  28.   stateAbbreviation = '';
  29.   isPostalCodeInvalid = false;
  30.   isStateValueMismatchWithPostalCode = false;
  31.   cityName = '';
  32.  
  33.   constructor(public route: ActivatedRoute, public dialogService: DialogService, public organizationService: OrganizationService,
  34.               private router: Router, public location: Location, public regex: Regex, public utilService: UtilService) {
  35.   }
  36.  
  37.   onSubmit(orgType: any) {
  38.     let parentOrgId = '';
  39.     if (this.parentOrganizationId) {
  40.       parentOrgId = this.parentOrganizationId.toString();
  41.     }
  42.     this.organizationService.createChildOrganization(this.parentOrganizationUserName, parentOrgId, this.model)
  43.       .subscribe((response: HttpResponseBase) => {
  44.         if (response instanceof HttpResponse) {
  45.           this.createdOrgId = response.body['organizationId'];
  46.           this.resResult = !response.body['customMessage'];
  47.           this.openDialog(this.resResult, orgType, response.body['customMessage']);
  48.         } else if (response instanceof HttpErrorResponse) {
  49.           this.resErrorResult = response.error['text'];
  50.           this.openDialog(false, orgType, this.resErrorResult);
  51.         }
  52.       }, (error) => {
  53.         this.openDialog(false, orgType, '');
  54.       });
  55.   }
  56.  
  57.   isFormInputInvalid(input: string): boolean {
  58.     return Utility.isFormInputInvalid(input, this.orgForm);
  59.   }
  60.  
  61.   isUserNameAvailable(control: AbstractControl): Observable<ValidationErrors | null> {
  62.     return this.organizationService.getUserNameAvailability(control.value).map((res: any) => res.isUserNameAvailable ? null : res);
  63.   }
  64.  
  65.  
  66.   /**
  67.    * Get the state abbreviation with the postal code from google API and judged whether is postal code is valid or not.
  68.    * @param postalCode postal code.
  69.    */
  70.   onPostalChanges(postalCode: string) {
  71.     this.isFirstTimeToChoose = true;
  72.     if (postalCode) {
  73.       this.utilService.getAddressInfoWithPostalCode(postalCode).subscribe(res => {
  74.         const address = Utility.filterStateWithPostalCodeFromGoogleApi(res);
  75.         if (address && address.state) {
  76.           this.isPostalCodeInvalid = false;
  77.           this.stateAbbreviation = address.state;
  78.           this.cityName = address.city;
  79.           this.isStateValueMismatchWithPostalCode = false;
  80.         } else {
  81.           this.isPostalCodeInvalid = true;
  82.         }
  83.       });
  84.     }
  85.   }
  86.  
  87.   /**
  88.    * When changed the state select value then will call this method,it used to confirm whether
  89.    * the state value is match with the postal code or not.
  90.    * @param stateAbbreviationFirstValue the abbreviation of the firstly selected state value.
  91.    * @param stateAbbreviationNewValue the abbreviation of the now selected state value.
  92.    */
  93.   isStateAndPostalCodeValid(stateAbbreviationNewValue: string, stateAbbreviationFirstValue: string) {
  94.     if (stateAbbreviationNewValue !== undefined && stateAbbreviationFirstValue !== undefined) {
  95.       if (stateAbbreviationFirstValue.match(stateAbbreviationNewValue)) {
  96.         this.isStateValueMismatchWithPostalCode = false;
  97.       } else {
  98.         this.isStateValueMismatchWithPostalCode = true;
  99.       }
  100.     }
  101.   }
  102.  
  103.   /**
  104.    * change event on state field
  105.    * save the first value of state field,and judge whether the postal code and state is match or not.
  106.    */
  107.   onStateChange($event) {
  108.     if (this.isFirstTimeToChoose === true) {
  109.       this.stateAbbreviationFirstValue = this.stateAbbreviation;
  110.       this.isFirstTimeToChoose = false;
  111.     }
  112.     this.isStateAndPostalCodeValid(this.stateAbbreviation, this.stateAbbreviationFirstValue);
  113.   }
  114. }

Utility.ts,解析谷歌api返回的json
 

  1. /**
  2.    * Filter the results of requesting google api, retain the state's abbreviation and the city name.
  3.    * @param res the results from calling the google API.
  4.    * @returns Address including the abbreviation of State and the city name.
  5.    */
  6.   static filterStateWithPostalCodeFromGoogleApi(res: any): Address {
  7.     const address: Address = {};
  8.     if (res['results'].length === 0) {
  9.       return res[0];
  10.     } else {
  11.       const stateNames = res['results'][0]['address_components'].filter(resp => resp['types'][0] === 'administrative_area_level_1')
  12.         .map(re => re['short_name']);
  13.       const cityNames = res['results'][0]['address_components'].filter(resp => resp['types'][0] === 'locality')
  14.         .map(re => re['long_name']);
  15.  
  16.       address.state = stateNames[0];
  17.       address.city = cityNames[0];
  18.       return address;
  19.     }
  20.   }

 

测试点击事件ngModelChange

  1. it('should go from model to change event', async(() => {
  2.     const fixture = TestBed.createComponent(CreateMerchantComponent);
  3.     const comp = fixture.componentInstance;
  4.     spyOn(comp, 'onStateChange');
  5.     comp.stateItems = states;
  6.     comp.stateAbbreviation = states[1];
  7.     fixture.detectChanges();
  8.     const select = fixture.debugElement.query(By.css('#state'));
  9.     fixture.whenStable().then(() => {
  10.       select.nativeElement.dispatchEvent(new Event('change'));
  11.       fixture.detectChanges();
  12.       expect(comp.onStateChange).toHaveBeenCalledWith('AK');
  13.     });
  14.   }));

 

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号