无法在 p-autocomplete 中将值绑定到 ngModel

Question

我有组件，我在其中使用 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>

这里是组件的打字稿部分

 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

但如果我在输入下写{{address.line1}}，就没问题了。您可以从屏幕截图中看到它。

我的问题在哪里，我该如何解决？

Answer 1

您使用 searchAddress() 搜索地址，它会填充地址属性。地址是复杂的对象而不是简单的字符串，对吧？

 [suggestions]="addresses"
 (completeMethod)="searchAddress($event)"
 [(ngModel)]="address.line1"

因此 p-autocomplete 的 ngModel 将是选定的地址对象。但是你将 ngModel 绑定到 address.line1 ，它应该是一个字符串。此外，address.line1 然后由 onSelectAddress 方法填充：

this.address.line1 = event.name;

我建议您将选定的地址对象与 address.line1 分开，并将 ngModel 绑定到不同的属性 - 例如 [(ngModel)]="selectedAddress"

Answer 2

如果在@PeterFromCologne 的解决方案之后仍然无法正常工作，请确保将 [multiple] 设置为 false

               <p-autoComplete
                  [style]="{ width: '100%' }"
                  [(ngModel)]="selectedLabTemplate.testName"
                  [suggestions]="selectedLabTemplate"
                  (completeMethod)="GetLabTest($event)"

                  [multiple]="false"
                ></p-autoComplete>

无法在 p-autocomplete 中将值绑定到 ngModel

Can't bind value to ngModel in p-autocomplete

javascript

typescript

primeng

angular