首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >无法将值绑定到p-autocomplete中的ngModel

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

Stack Overflow用户
提问于 2020-02-19 03:11:29
回答 2查看 2.3K关注 0票数 0

我有组件,其中我使用primeNG p-autocomplete

下面是此组件的html

代码语言:javascript
运行
复制
<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部分

代码语言:javascript
运行
复制
 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}},一切都没问题。你可以从截图中看到它。

我的问题在哪里,我如何解决它?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-02-19 04:03:07

您可以使用searchAddress()搜索地址,它会填充addresses属性。地址是复杂的对象,而不是简单的字符串,对吗?

代码语言:javascript
运行
复制
 [suggestions]="addresses"
 (completeMethod)="searchAddress($event)"
 [(ngModel)]="address.line1"

因此,p-autocomplete的ngModel将是所选的address对象。但是,然后将ngModel绑定到address.line1,它应该是一个字符串。此外,然后使用onSelectAddress方法填充address.line1:

代码语言:javascript
运行
复制
this.address.line1 = event.name;

我建议您将所选的address对象从address.line1中分离出来,并将ngModel绑定到不同的属性-比如(ngModel)="selectedAddress“

票数 2
EN

Stack Overflow用户

发布于 2020-11-18 23:01:42

如果在@PeterFromCologne的解决方案之后它仍然不起作用,请确保将multiple设置为false

代码语言:javascript
运行
复制
               <p-autoComplete
                  [style]="{ width: '100%' }"
                  [(ngModel)]="selectedLabTemplate.testName"
                  [suggestions]="selectedLabTemplate"
                  (completeMethod)="GetLabTest($event)"

                  [multiple]="false"
                ></p-autoComplete>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60287901

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档