我想在上面的地址中将一个值拆分为下面的文本框地址二，城市和州。那我怎么能这样做呢？
我的HTML代码如下：
<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>
控制器的代码如下： -
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;
}
}
提前致谢！
答案 0 :(得分：0)
您可以创建一个功能，解析您的地址一个字段，并使用它找到的内容（即城市，州等）更新您的模型。在地址编辑一个字段后调用该函数。
PS：您可能想澄清一下您遇到的问题究竟是什么，而不是寻求帮助以实现某些功能。我的2美分。答案 1 :(得分：0)
我将实际的搜索功能作为一个完全独立的输入字段，然后在其他字段中显示该搜索的结果。至于搜索结果，我假设你得到一个字符串：
stringToSplit = 'South Las Vegas Boulevard,NV,United States'
对此我只使用String.prototype.split()，这会将您的数据转换为字符串数组，您可以将其分配给model。
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">