我有组件,其中我使用primeNG p-autocomplete
下面是此组件的html
<form #addressForm="ngForm" novalidate name="AddressForm">
<div class="form-group">
<label for="Line1">{{ 'AddressLine1' | localize }} *</label>
<p-autoComplete
#addressLine1="ngModel"
[(ngModel)]="address.line1"
[suggestions]="addresses"
field="name"
[inputStyle]="{ width: '100%' }"
name="lin1"
(completeMethod)="searchAddress($event)"
[size]="10"
placeholder="{{ 'Line1Placeholder' | localize }}"
(onSelect)="onSelectAddress($event)"
[minLength]="3"
required
(change)="checkValidity()"
></p-autoComplete>
<validation-messages [formCtrl]="addressLine1"></validation-messages>
{{address.line1}}
</div>
<div class="form-group">
<label for="Line2">{{ 'AddressLine2' | localize }}</label>
<input
id="Line2"
class="form-control"
#line2Input="ngModel"
type="text"
name="Line2"
placeholder="{{ 'Line2Placeholder' | localize }}"
[(ngModel)]="address.line2"
maxlength="128"
(change)="checkValidity()"
/>
</div>
<div class="form-group">
<label for="Line3">{{ 'AddressLine3' | localize }} </label>
<input
id="Line3"
class="form-control"
#line3Input="ngModel"
type="text"
name="Line3"
[(ngModel)]="address.line3"
maxlength="128"
(change)="checkValidity()"
/>
<validation-messages [formCtrl]="line3Input"></validation-messages>
</div>
这是组件的typescript部分
import { Component, Injector, forwardRef, ViewChild, AfterContentChecked, ElementRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, ValidationErrors } from '@angular/forms';
import { AddressType } from '@shared/AppEnums';
import { AppComponentBase } from '@shared/common/app-component-base';
import { AddressDto } from '@shared/service-proxies/service-proxies';
import { SelectItem } from 'primeng/primeng';
import PlaceResult = google.maps.places.PlaceResult;
import { Feature } from '../../dto/mapboxOutput';
import { MapboxServiceService } from '../mapbox-service';
@Component({
selector: 'edit-main-address',
templateUrl: './edit-main-address.component.html',
providers: [
{ provide: NG_VALUE_ACCESSOR, useExisting: EditMainAddressComponent, multi: true },
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => EditMainAddressComponent),
multi: true,
},
],
})
export class EditMainAddressComponent extends AppComponentBase implements ControlValueAccessor, AfterContentChecked {
@ViewChild('addressForm') addressForm;
@ViewChild('search') public searchElement: ElementRef;
@ViewChild('postCode') public postCodeElement: ElementRef;
@ViewChild('town') public townElement: ElementRef;
@ViewChild('country') public countryElement: ElementRef;
required: string | boolean;
private changed = [];
private touched = [];
public selectedAddress: PlaceResult;
disabled: boolean;
address: AddressDto = new AddressDto();
addressTypes: SelectItem[] = [];
addresses: any[] = [];
selectedAddresses: any = null;
public lat: any;
public lng: any;
public postCode: string;
public country: string;
public city: string;
public line1: any;
constructor(injector: Injector, private mapboxService: MapboxServiceService) {
super(injector);
this.addressTypes.push({ label: this.l('Address.Main'), value: AddressType.Main });
this.addressTypes.push({ label: this.l('Address.Billing'), value: AddressType.Billing });
this.addressTypes.push({ label: this.l('Address.Delivery'), value: AddressType.Delivery });
this.addressTypes.push({ label: this.l('Address.Correspondence'), value: AddressType.Correspondence });
}
ngAfterContentChecked(): void {
this.checkValidity();
}
checkValidity(): void {}
get value(): AddressDto {
return this.address;
}
set value(value: AddressDto) {
if (this.address !== value) {
this.address = value;
this.changed.forEach(f => f(value));
}
}
registerOnChange(fn: any): void {
this.changed.push(fn);
}
registerOnTouched(fn: any): void {
this.touched.push(fn);
}
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
}
writeValue(obj: AddressDto): void {
if (obj) {
this.address = obj;
this.checkValidity();
}
}
validate(): ValidationErrors {
if (!this.addressForm.valid) {
return { message: 'custom error' };
}
return null;
}
registerOnValidatorChange(fn: () => void): void {
this.checkValidity = fn;
}
searchAddress(event: any): any {
const searchTerm = event.query.toLowerCase();
if (searchTerm && searchTerm.length > 0) {
this.mapboxService.addressSearch(searchTerm).subscribe((features: Feature[]) => {
this.addresses = [...features.map(e => ({ name: e.place_name, id: e.place_name, feature: e }))];
});
} else {
this.addresses = [];
}
}
onSelectAddress(event: any): any {
if (event.feature.id.startsWith('address')) {
this.address.line1 = event.name;
this.address.longitude = event.feature.center[0];
this.address.latitude = event.feature.center[1];
this.address.postTown = event.feature.context.filter(element =>
element.id.startsWith('place')
)[0].text;
this.address.county = event.feature.context.filter(element =>
element.id.startsWith('district')
)[0].text;
this.address.country = event.feature.context.filter(element =>
element.id.startsWith('country')
)[0].text;
this.address.postCode = event.feature.context.filter(element =>
element.id.startsWith('postcode')
)[0].text;
}
if (event.feature.id.startsWith('postcode')) {
this.address.line1 = event.name;
this.address.longitude = event.feature.center[0];
this.address.latitude = event.feature.center[1];
this.address.postTown =event.feature.context.filter(element =>
element.id.startsWith('place')
)[0].text;
this.address.county = event.feature.context.filter(element =>
element.id.startsWith('district')
)[0].text;
this.address.country = event.feature.context.filter(element =>
element.id.startsWith('country')
)[0].text;
this.address.postCode = event.feature.text;
}
}
ngOnInit(): void {}
}
我的问题是所有字段的ngModel设置都很好,但没有设置p-autocomplete
但是如果我在input下写{{address.line1}}
,一切都没问题。你可以从截图中看到它。
我的问题在哪里,我如何解决它?
发布于 2020-02-19 04:03:07
您可以使用searchAddress()搜索地址,它会填充addresses属性。地址是复杂的对象,而不是简单的字符串,对吗?
[suggestions]="addresses"
(completeMethod)="searchAddress($event)"
[(ngModel)]="address.line1"
因此,p-autocomplete的ngModel将是所选的address对象。但是,然后将ngModel绑定到address.line1,它应该是一个字符串。此外,然后使用onSelectAddress方法填充address.line1:
this.address.line1 = event.name;
我建议您将所选的address对象从address.line1中分离出来,并将ngModel绑定到不同的属性-比如(ngModel)="selectedAddress“
发布于 2020-11-18 23:01:42
如果在@PeterFromCologne的解决方案之后它仍然不起作用,请确保将multiple设置为false
<p-autoComplete
[style]="{ width: '100%' }"
[(ngModel)]="selectedLabTemplate.testName"
[suggestions]="selectedLabTemplate"
(completeMethod)="GetLabTest($event)"
[multiple]="false"
></p-autoComplete>
https://stackoverflow.com/questions/60287901
复制相似问题