한 텍스트 상자에서 주소를 분할하고 다른 텍스트 상자에 값을 표시하는 방법은 무엇입니까?

Question

Open the image to see it

위의 주소 하나의 값을 두 개의 도시 및 주 주소로 나눌 수 있습니다. 어떻게해야합니까?

<p>         
    <label class="w3-text-teal"><b>Address One</b></label> 
    <input #search [formControl]="searchControl" class="w3-input w3-border" type="text" required [(ngModel)]="model.addressOne" placeholder="Address" 
    name="addressOne" minlength="4" maxlength="15" autocorrect="off" autocapitalize="off" spellcheck="off"> 
</p> 
<div *ngIf="addresone.invalid && (addresone.dirty || addresone.touched)" class="alert alert-danger"> 
    <div class="w3-text-red" *ngIf="addresone.errors.required"> 
    addresone is required. 
    </div> 
    <div class="w3-text-red" *ngIf="addresone.errors.minlength"> 
    addresone must be at least 4 characters long. 
    </div> 
    <div class="w3-text-red" *ngIf="addresone.errors.maxlength"> 
    addresone must be less than 15 characters. 
    </div> 
</div> 

<p> 
    <label class="w3-text-teal"><b>Address Two</b></label> 
    <input #addressTwo="ngModel" class="w3-input w3-border" type="text" required [(ngModel)]="model.addressTwo" placeholder="Address" 
    name="addressTwo" minlength="4" maxlength="15"> 
</p> 
<div *ngIf="addressTwo.invalid && (addressTwo.dirty || addressTwo.touched)" class="alert alert-danger"> 
    <div class="w3-text-red" *ngIf="addressTwo.errors.required"> 
    addressTwo is required. 
    </div> 
    <div class="w3-text-red" *ngIf="addressTwo.errors.minlength"> 
    addressTwo must be at least 4 characters long. 
    </div> 
    <div class="w3-text-red" *ngIf="addressTwo.errors.maxlength"> 
    addressTwo must be less than 15 characters. 
    </div> 
</div> 
<p> 
    <label class="w3-text-teal"><b>City</b></label> 
    <input #city="ngModel" class="w3-input w3-border" type="text" required [(ngModel)]="model.city" placeholder="city" name="city" 
    minlength="4" maxlength="15"> 
</p> 
<div *ngIf="city.invalid && (city.dirty || city.touched)" class="alert alert-danger"> 
    <div class="w3-text-red" *ngIf="city.errors.required"> 
    city is required. 
    </div> 
    <div class="w3-text-red" *ngIf="city.errors.minlength"> 
    city must be at least 4 characters long. 
    </div> 
    <div class="w3-text-red" *ngIf="city.errors.maxlength"> 
    city must be less than 15 characters. 
    </div> 
</div> 
<p> 
    <label class="w3-text-teal"><b>State</b></label> 
    <input #state="ngModel" class="w3-input w3-border" type="text" required [(ngModel)]="model.state" placeholder="state" 
    name="state" minlength="4" maxlength="15"> 
</p> 
<div *ngIf="state.invalid && (state.dirty || state.touched)" class="alert alert-danger"> 
    <div class="w3-text-red" *ngIf="state.errors.required"> 
    state is required. 
    </div> 
    <div class="w3-text-red" *ngIf="state.errors.minlength"> 
    state must be at least 4 characters long. 
    </div> 
    <div class="w3-text-red" *ngIf="state.errors.maxlength"> 
    state must be less than 15 characters. 
    </div> 
</div> 
<p> 
    <label class="w3-text-teal"><b>Zip Code</b></label> 
    <input #zipCode="ngModel" class="w3-input w3-border" type="text" required [(ngModel)]="model.zipCode" placeholder="zipCode" 
    name="zipCode" minlength="4" maxlength="15"> 
</p> 
<div *ngIf="zipCode.invalid && (zipCode.dirty || zipCode.touched)" class="alert alert-danger"> 
    <div class="w3-text-red" *ngIf="zipCode.errors.required"> 
    zipCode is required. 
    </div> 
    <div class="w3-text-red" *ngIf="zipCode.errors.minlength"> 
    zipCode must be at least 4 characters long. 
    </div> 
    <div class="w3-text-red" *ngIf="zipCode.errors.maxlength"> 
    zipCode must be less than 15 characters. 
    </div> 
</div> 

그리고 다음과 같이 컨트롤러의 코드는 다음과 같습니다 :

HTML에 대한 나의 코드는 다음과 같습니다 -

import { Component, OnInit, ElementRef, NgModule, NgZone, ViewChild } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import { Router, ActivatedRoute, Params, Data } from '@angular/router'; 
import { CanActivate } from '@angular/router'; 
import { LocalStorageService, SessionStorageService } from 'ngx-webstorage'; 
import { AgmCoreModule, MapsAPILoader } from '@agm/core'; 
import { AuthenticationUserService } from '../authentication-user.service'; 
import { BrowserModule } from "@angular/platform-browser"; 
import { FormControl, FormsModule, ReactiveFormsModule } from "@angular/forms"; 
import {} from '@types/googlemaps'; 
declare var google:any; 

@Component({ 
    selector: 'app-add-company', 
    templateUrl: './add-company.component.html', 
    styleUrls: ['./add-company.component.css'] 
}) 

export class AddCompanyComponent implements OnInit { 
    URL; 
    public latitude: number; 
    public longitude: number; 
    public searchControl: FormControl; 
    public zoom: number; 


    @ViewChild("search") 
    public searchElementRef: ElementRef; 



    subscription1 = { 
    users: "", 
    period: "", 
    price: "" 
    }; 
    model = { 
    companyLogo: "" 
    }; 
    base64textString; 
    companyId; 
    companyName; 

    constructor(public http: Http, private mapsAPILoader: MapsAPILoader, 
    private ngZone: NgZone, private router: Router, public storage: LocalStorageService,private user:AuthenticationUserService) { 
    this.URL = this.storage.retrieve('url'); 
    this.companyId="59ef5e6c4695460aafd1f8d2"; 

    this.http.get(this.URL + 'companies/59ef5e6c4695460aafd1f8d2').map(res => res.json()).subscribe(data => { 
     this.model = data; 
     this.base64textString = data.companyLogo; 
    }); 
    } 


    ngOnInit() { 


    this.http.get(this.URL + 'subscriptions').map(res => res.json()).subscribe(data => { 
     this.subscription1 = data; 

    }); 
    //saurabh 

     this.URL= this.storage.retrieve('url'); 
    this.companyName = this.storage.retrieve('companyName'); 

     this.http.get(this.URL + "Companies?filter[where][email]=" + this.storage.retrieve('email') + "&filter[where][password]=" + this.storage.retrieve('password') +"&filter[where][companyName]=" + this.companyName) 
      .map(res => res.json()) 
      .subscribe(isCompany => { 
      isCompany.length == 0 ? this.router.navigate([this.companyName]) : this.user.setUserLoggedIn(), this.router.navigate([this.companyName + '/dashboard']); 
      }); 

      //set google maps defaults 
    this.zoom = 4; 
    this.latitude = 39.8282; 
    this.longitude = -98.5795; 

    //create search FormControl 
    this.searchControl = new FormControl(); 

    //set current position 
    this.setCurrentPosition(); 

    //load Places Autocomplete 
    this.mapsAPILoader.load().then(() => { 
     let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, { 
     types: ["address"] 
     }); 
     autocomplete.addListener("place_changed",() => { 
     this.ngZone.run(() => { 
      //get the place result 
      let place: google.maps.places.PlaceResult = autocomplete.getPlace(); 

      //verify result 
      if (place.geometry === undefined || place.geometry === null) { 
      return; 
      } 

      //set latitude, longitude and zoom 
      this.latitude = place.geometry.location.lat(); 
      this.longitude = place.geometry.location.lng(); 
      this.zoom = 12; 
     }); 
     }); 
    }); 

    } 

    private setCurrentPosition() { 
    if ("geolocation" in navigator) { 
     navigator.geolocation.getCurrentPosition((position) => { 
     this.latitude = position.coords.latitude; 
     this.longitude = position.coords.longitude; 
     this.zoom = 12; 
     }); 
    } 
    } 


    onSubmit(form) { 

    this.http.post(this.URL + 'companies', form).subscribe(data => { 
     console.log('success'); 
    }); 

    console.log("on submit par"); 

    console.log(this.base64textString); 



    } 

    onCancel(form){ 
    console.log(form); 
     this.http.patch(this.URL + 'companies/'+this.companyId, form).subscribe(data => { 
     console.log('success'); 
    }); 

    } 

    onClear() { 

    } 

//method done by one and only Niraj :) 
    imageUpload(evt) { 
    var files = evt.target.files; 
    var file = files[0]; 

    if (files && file) { 
     var reader = new FileReader(); 

     reader.onload = this._imageReaderLoaded.bind(this); 

     reader.readAsBinaryString(file); 
    } 
    } 



    _imageReaderLoaded(readerEvt) { 
    var binaryString = readerEvt.target.result; 
    this.base64textString = "data:image/png;base64," + btoa(binaryString); 

    this.model.companyLogo = this.base64textString; 

    } 


} 

감사합니다 사전에!

Answer 1

주소 필드를 구문 분석하고 발견 한 항목 (도시, 주 등)으로 모델을 업데이트하는 함수를 만들 수 있습니다. 한 필드가 편집 된 후 해당 함수를 호출하십시오.

추신 : 귀하의 문제가 정확히 무엇인지 구현하는 것에 대한 도움을 요청하는 것과 비교하여 정확히 무엇을 설명하고 싶을 수 있습니다. 단지 2 센트.

Answer 2

나는 완전히 별도의 입력 필드로 실제 검색 기능을 보유하고 대신 다른 필드에 해당 검색 결과를 표시합니다. 난 그냥 당신이 당신의 model에 할당 할 수있는 문자열 배열에 데이터를 만드는 String.prototype.split()을 사용하는 것이 여기에

stringToSplit = 'South Las Vegas Boulevard,NV,United States' 

: 검색 결과에 관해서는, 나는 당신이 같은 문자열을 얻을 가정합니다.

this.model = this.stringToSplit.split(','); 

은 그럼 그냥 새로 생성 된 배열하여 [(ngModel)]에 인덱스를 참조 할 수 있습니다. ,

<input [formControl]="searchControl"/> 
<input [(ngModel)]="model[0]" name="addressOne" #addressOne="ngModel"> 
<input [(ngModel)]="model[1]" name="addressTwo" #addressTwo="ngModel">