Angular 角度5-组件具有多个子组件和MAT-AUTOCOMPLETE正在减慢键入速度
我有一个父组件，其中有许多子组件具有MAT-AUTOCOMPLETE。在浏览具有自动完成功能的字段后，会减慢完整表单上的键入速度 提前谢谢 父组件HTMLAngular 角度5-组件具有多个子组件和MAT-AUTOCOMPLETE正在减慢键入速度,angular,Angular,我有一个父组件，其中有许多子组件具有MAT-AUTOCOMPLETE。在浏览具有自动完成功能的字段后，会减慢完整表单上的键入速度 提前谢谢 父组件HTML <div> <div> <form autocomplete="off" id="airwaybillForm" name="airwaybillForm" method="POST" action="javascript: void(0);" jhiFormFieldsChangesDe
<div>
<div>
<form autocomplete="off" id="airwaybillForm" name="airwaybillForm" method="POST" action="javascript: void(0);" jhiFormFieldsChangesDetector jhiFormReset="awbprefix" [formGroup]="airwaybillForm" novalidate (ngSubmit)="submitAirwaybill();">
<div>
<jhi-header-buttons [form]="airwaybillForm"></jhi-header-buttons>
</div>
<mat-card class="aci-sample-card">
<mat-card-content class="aci-sample-content">
<div class="row custom-mat-card-header">
<div class="col-12 default-row-height">
<mat-card-header>
<mat-card-title>Master Airway Bill Details</mat-card-title>
</mat-card-header>
</div>
</div>
<div class="row">
<div class="col-4 custom-awbnumber">
<mat-form-field>
<jhi-awbnumber-search
[awbnumberGroup]="airwaybillForm.controls.awbnumberGroup"
[isFormSubmitted]="isFormSubmitted"
[isFormFieldMarkAsTouched]="isFormFieldMarkAsTouched"
[isFormFieldsEnabled]="isFormFieldsEnabled"
(isFormFieldsEnabledEmitter)="isFormFieldsEnabledChange($event)"
[formControlAwbprefixName]="'awbprefix'"
[formControlAwbprefixValue]="formControlAwbprefixValue"
[formControlAwbnumberName]="'awbnumber'"
[formControlAwbnumberValue]="formControlAwbnumberValue"
[fieldChangeShowConfirmationDialog]="true"
[isAwbPrefixFieldInvalid]="isAwbPrefixFieldInvalid"
[isRequired]="true"
placeholder="Airway Bill Number">
</jhi-awbnumber-search>
<mat-icon matSuffix class="forward-search-icon">
<a href="javascript: void(0);" (click)="searchAirwayBill(airwaybillForm.get('awbnumberGroup.awbprefix').value, airwaybillForm.get('awbnumberGroup.awbnumber').value); $event.stopPropagation();">arrow_forward</a>
</mat-icon>
</mat-form-field>
</div>
<div class="col-4">
<jhi-origin-search
[fieldId]="'origin'"
[fieldName]="'origin'"
[fieldPlaceholder]="'Origin'"
[originGroup]="airwaybillForm.controls.originGroup"
[isFormSubmitted]="isFormSubmitted"
[compareWithFieldValue]="airwaybillForm.get('destinationGroup.destination').value"
[formControlFieldName]="'origin'"
[isRequired]="true">
</jhi-origin-search>
</div>
<div class="col-4">
<jhi-destination-search
[fieldId]="'destination'"
[fieldName]="'destination'"
[fieldPlaceholder]="'Destination'"
[destinationGroup]="airwaybillForm.controls.destinationGroup"
[isFormSubmitted]="isFormSubmitted"
[compareWithFieldValue]="airwaybillForm.get('originGroup.origin').value"
[formControlFieldName]="'destination'"
[isRequired]="true">
</jhi-destination-search>
</div>
</div>
<div class="row">
<div class="col-4">
<jhi-pieces
[fieldId]="'pieces'"
[fieldName]="'pieces'"
[fieldPlaceholder]="'Pieces'"
[piecesGroup]="airwaybillForm.controls.piecesGroup"
[formControlFieldName]="'pieces'"
[isFormSubmitted]="isFormSubmitted"
[maxLength]="4"
[isRequired]="true"
[isReadOnly]="false">
</jhi-pieces>
</div>
<div class="col-4">
<jhi-weight
[fieldId]="'weight'"
[fieldName]="'weight'"
[fieldPlaceholder]="'Weight'"
[weightGroup]="airwaybillForm.controls.weightGroup"
[formControlFieldName]="'weight'"
[isFormSubmitted]="isFormSubmitted"
[format]="'5,2'"
[maxLength]="8"
[isRequired]="true"
[isReadOnly]="false">
</jhi-weight>
</div>
<div class="col-4">
<jhi-volume
[fieldId]="'volume'"
[fieldName]="'volume'"
[fieldPlaceholder]="'Volume'"
[volumeGroup]="airwaybillForm.controls.volumeGroup"
[formControlFieldName]="'volume'"
[isFormSubmitted]="isFormSubmitted"
[format]="'7,2'"
[maxLength]="10"
[isRequired]="true"
[isReadOnly]="false">
</jhi-volume>
</div>
</div>
<div class="row">
<div class="col-12">
<jhi-customer-search
[fieldId]="'customer'"
[fieldName]="'customer'"
[fieldPlaceholder]="'Customer'"
[customerGroup]="airwaybillForm.controls.customerGroup"
[isFormSubmitted]="isFormSubmitted"
[formControlFieldName]="'customer'"
[maxLength]="40"
[isRequired]="true"
(consigneeDetail)="populateConsignee($event);">
</jhi-customer-search>
</div>
</div>
<div class="row">
<div class="col-12">
<jhi-shc-codes
[fieldId]="'shcCodes'"
[fieldName]="'shcCodes'"
[fieldPlaceholder]="'SHC'"
[shcCodesGroup]="airwaybillForm.controls.shcCodesGroup"
[isFormSubmitted]="isFormSubmitted"
[formControlFieldName]="'shcCodes'"
[fieldShcCodes]="airwaybillForm.get('shcCodesGroup.shcCodes').value"
[isSearched]="isSearched"
[maxChipsAllowed]="9"
(isSearchedFalse)="isSearchedFalse($event);"
[isRequired]="false"
[isDisabled]="airwaybillForm.get('shcCodesGroup.shcCodes').disabled"
[isRemovable]="isCreateMode">
</jhi-shc-codes>
</div>
</div>
</mat-card-content>
</mat-card>
</form>
</div>
</div>
主空运提单明细
<div [formGroup]="customerGroup">
<mat-form-field>
<input
id="{{fieldId ? fieldId : 'customer'}}"
name="{{fieldName ? fieldName : 'customer'}}"
type="text"
placeholder="{{fieldPlaceholder ? fieldPlaceholder : 'Customer'}}"
(input)="searchCustomer($event.target.value);"
matInput
class="text-overflow-ellipsis uppercase"
title="{{fieldPlaceholder ? fieldPlaceholder : 'Customer'}}"
formControlName="{{formControlFieldName ? formControlFieldName : 'customer'}}"
[matAutocomplete]="auto"
[required]="isRequired"
maxlength="{{maxLength}}"
[readonly]="isReadOnly"
(focus)="isFocusOut = false; focusManager(true);"
(focusout)="isFocusOut = true; focusManager(false);"
autocomplete="off"
/>
<mat-error *ngIf="formErrors[formControlFieldName]">
{{formErrors[formControlFieldName]}}
</mat-error>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)='selectCustomer($event.option.value);' autoActiveFirstOption>
<mat-option *ngFor="let customer of customers" [value]="customer">
{{customer.userName}} - {{customer.companyName}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
import { Component, OnInit, Input, OnChanges, HostListener, EventEmitter, Output, OnDestroy } from '@angular/core';
import { FormGroup, Validators } from '@angular/forms';
import { CustomerService } from './customer.service';
import { CommonService, CUSTOMER_SEARCH_MIN_LENGTH } from '../../../shared';
import { Subscription } from '../../../../../../../node_modules/rxjs';
@Component({
selector: 'jhi-customer-search',
templateUrl: './customer.component.html',
styleUrls: ['./customer.component.css']
})
export class CustomerSearchComponent implements OnInit, OnChanges, OnDestroy {
@Input() customerGroup: FormGroup;
@Input() isFormSubmitted: boolean;
@Input() isRequired: boolean;
@Input() fieldId: string;
@Input() fieldName: string;
@Input() fieldPlaceholder: string;
@Input() isReadOnly = false;
@Input() formControlFieldName: string;
@Input() maxLength: number;
@Output() consigneeDetail: EventEmitter<any> = new EventEmitter<any>();
auto: any;
customers: any;
validationMessages: any;
formErrors = [];
isFocusOut = false;
isCustomerSelected = true;
CUSTOMER_SEARCH_MIN_LENGTH = CUSTOMER_SEARCH_MIN_LENGTH;
getCustomersSubscriptions: Subscription;
constructor(
private commonService: CommonService,
private customerService: CustomerService
) { }
ngOnInit() {
this.validationMessages = {
[this.formControlFieldName]: {
required: 'Please enter customer name.'
}
};
}
@HostListener('change') ngOnChanges() {
if (this.isFormSubmitted) {
this.customerGroup.get('customer').markAsTouched();
this.focusManager(false);
}
this.checkValidations();
}
focusManager(isFocusIn = null) {
if (isFocusIn === true) {
this.customers = [];
this.customerGroup.get(this.formControlFieldName).setValidators([]);
}
if (isFocusIn === false) {
this.customerGroup.get(this.formControlFieldName).setValidators([]);
if (this.isRequired) {
this.customerGroup.get(this.formControlFieldName).setValidators([Validators.required]);
}
// checking length if it is less than the required then remove it automatically and on focus out check if searched data available then select top option automatically
const searchText = this.customerGroup.get(this.formControlFieldName).value;
if (searchText && searchText.length < this.CUSTOMER_SEARCH_MIN_LENGTH) {
this.customerGroup.get(this.formControlFieldName).setValue(null);
this.customerGroup.get('selectedCustomer').setValue(null);
} else if (this.isCustomerSelected === false && this.customers && this.customers[0] && this.customers[0].companyName) {
this.customerGroup.get(this.formControlFieldName).setValue(this.customers[0].companyName.toUpperCase());
this.customerGroup.get('selectedCustomer').setValue(this.customers[0]);
this.consigneeDetail.emit(this.customers[0]);
this.isCustomerSelected = true;
}
}
this.checkValidations();
}
checkValidations() {
this.customerGroup.get(this.formControlFieldName).updateValueAndValidity();
this.formErrors = this.commonService.getFormValidationErrors(this.customerGroup, this.validationMessages, this.formErrors);
}
selectCustomer(selectedCustomer = null) {
if (selectedCustomer) {
this.customerGroup.get(this.formControlFieldName).setValue(selectedCustomer.companyName.toUpperCase());
this.customerGroup.get('selectedCustomer').setValue(selectedCustomer);
this.consigneeDetail.emit(selectedCustomer);
this.isCustomerSelected = true;
}
if (this.isCustomerSelected === false) {
if (this.customers && this.customers[0] && this.customers[0].companyName) {
this.customerGroup.get(this.formControlFieldName).setValue(this.customers[0].companyName.toUpperCase());
this.customerGroup.get('selectedCustomer').setValue(this.customers[0]);
this.consigneeDetail.emit(this.customers[0]);
this.isCustomerSelected = true;
} else {
this.customerGroup.get(this.formControlFieldName).setValue(null);
this.customerGroup.get('selectedCustomer').setValue(null);
this.isCustomerSelected = false;
this.focusManager(false);
}
this.unSubscribeServices();
}
}
searchCustomer(searchText) {
this.isCustomerSelected = false;
this.unSubscribeServices();
this.customers = [];
if (searchText.length >= this.CUSTOMER_SEARCH_MIN_LENGTH) {
this.getCustomersSubscriptions = this.customerService.getCustomers(searchText).subscribe((response) => {
const custometrsDetails = response['details'];
if (custometrsDetails) {
custometrsDetails.forEach((customer) => {
if ((customer.userName && customer.companyName) || customer.wknCCode) {
this.customers.push({
'ccCode': customer.ccCode,
'companyName': customer.wknCCode ? 'WALKIN CUSTOMER' : customer.companyName,
'userName': customer.wknCCode ? 'WALKIN' : customer.userName,
'accountCode': customer.accountCode,
'companyCode': customer.wknCCode ? 'WLKIN' : customer.companyCode,
'customercode': customer.wknCCode ? 'WALKIN' : customer.customercode,
'street': customer.street,
'place': customer.place,
'countryCode': customer.countryCode,
'email': customer.email,
'mobile': customer.mobile,
'phone': customer.phone
});
}
});
if (this.isFocusOut) {
this.selectCustomer();
}
}
});
}
}
unSubscribeServices() {
if (this.getCustomersSubscriptions) {
this.getCustomersSubscriptions.unsubscribe();
}
}
ngOnDestroy() {
this.unSubscribeServices();
}
}
{{formErrors[formControlFieldName]}
{{customer.userName}-{{customer.companyName}
<div [formGroup]="customerGroup">
<mat-form-field>
<input
id="{{fieldId ? fieldId : 'customer'}}"
name="{{fieldName ? fieldName : 'customer'}}"
type="text"
placeholder="{{fieldPlaceholder ? fieldPlaceholder : 'Customer'}}"
(input)="searchCustomer($event.target.value);"
matInput
class="text-overflow-ellipsis uppercase"
title="{{fieldPlaceholder ? fieldPlaceholder : 'Customer'}}"
formControlName="{{formControlFieldName ? formControlFieldName : 'customer'}}"
[matAutocomplete]="auto"
[required]="isRequired"
maxlength="{{maxLength}}"
[readonly]="isReadOnly"
(focus)="isFocusOut = false; focusManager(true);"
(focusout)="isFocusOut = true; focusManager(false);"
autocomplete="off"
/>
<mat-error *ngIf="formErrors[formControlFieldName]">
{{formErrors[formControlFieldName]}}
</mat-error>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)='selectCustomer($event.option.value);' autoActiveFirstOption>
<mat-option *ngFor="let customer of customers" [value]="customer">
{{customer.userName}} - {{customer.companyName}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
import { Component, OnInit, Input, OnChanges, HostListener, EventEmitter, Output, OnDestroy } from '@angular/core';
import { FormGroup, Validators } from '@angular/forms';
import { CustomerService } from './customer.service';
import { CommonService, CUSTOMER_SEARCH_MIN_LENGTH } from '../../../shared';
import { Subscription } from '../../../../../../../node_modules/rxjs';
@Component({
selector: 'jhi-customer-search',
templateUrl: './customer.component.html',
styleUrls: ['./customer.component.css']
})
export class CustomerSearchComponent implements OnInit, OnChanges, OnDestroy {
@Input() customerGroup: FormGroup;
@Input() isFormSubmitted: boolean;
@Input() isRequired: boolean;
@Input() fieldId: string;
@Input() fieldName: string;
@Input() fieldPlaceholder: string;
@Input() isReadOnly = false;
@Input() formControlFieldName: string;
@Input() maxLength: number;
@Output() consigneeDetail: EventEmitter<any> = new EventEmitter<any>();
auto: any;
customers: any;
validationMessages: any;
formErrors = [];
isFocusOut = false;
isCustomerSelected = true;
CUSTOMER_SEARCH_MIN_LENGTH = CUSTOMER_SEARCH_MIN_LENGTH;
getCustomersSubscriptions: Subscription;
constructor(
private commonService: CommonService,
private customerService: CustomerService
) { }
ngOnInit() {
this.validationMessages = {
[this.formControlFieldName]: {
required: 'Please enter customer name.'
}
};
}
@HostListener('change') ngOnChanges() {
if (this.isFormSubmitted) {
this.customerGroup.get('customer').markAsTouched();
this.focusManager(false);
}
this.checkValidations();
}
focusManager(isFocusIn = null) {
if (isFocusIn === true) {
this.customers = [];
this.customerGroup.get(this.formControlFieldName).setValidators([]);
}
if (isFocusIn === false) {
this.customerGroup.get(this.formControlFieldName).setValidators([]);
if (this.isRequired) {
this.customerGroup.get(this.formControlFieldName).setValidators([Validators.required]);
}
// checking length if it is less than the required then remove it automatically and on focus out check if searched data available then select top option automatically
const searchText = this.customerGroup.get(this.formControlFieldName).value;
if (searchText && searchText.length < this.CUSTOMER_SEARCH_MIN_LENGTH) {
this.customerGroup.get(this.formControlFieldName).setValue(null);
this.customerGroup.get('selectedCustomer').setValue(null);
} else if (this.isCustomerSelected === false && this.customers && this.customers[0] && this.customers[0].companyName) {
this.customerGroup.get(this.formControlFieldName).setValue(this.customers[0].companyName.toUpperCase());
this.customerGroup.get('selectedCustomer').setValue(this.customers[0]);
this.consigneeDetail.emit(this.customers[0]);
this.isCustomerSelected = true;
}
}
this.checkValidations();
}
checkValidations() {
this.customerGroup.get(this.formControlFieldName).updateValueAndValidity();
this.formErrors = this.commonService.getFormValidationErrors(this.customerGroup, this.validationMessages, this.formErrors);
}
selectCustomer(selectedCustomer = null) {
if (selectedCustomer) {
this.customerGroup.get(this.formControlFieldName).setValue(selectedCustomer.companyName.toUpperCase());
this.customerGroup.get('selectedCustomer').setValue(selectedCustomer);
this.consigneeDetail.emit(selectedCustomer);
this.isCustomerSelected = true;
}
if (this.isCustomerSelected === false) {
if (this.customers && this.customers[0] && this.customers[0].companyName) {
this.customerGroup.get(this.formControlFieldName).setValue(this.customers[0].companyName.toUpperCase());
this.customerGroup.get('selectedCustomer').setValue(this.customers[0]);
this.consigneeDetail.emit(this.customers[0]);
this.isCustomerSelected = true;
} else {
this.customerGroup.get(this.formControlFieldName).setValue(null);
this.customerGroup.get('selectedCustomer').setValue(null);
this.isCustomerSelected = false;
this.focusManager(false);
}
this.unSubscribeServices();
}
}
searchCustomer(searchText) {
this.isCustomerSelected = false;
this.unSubscribeServices();
this.customers = [];
if (searchText.length >= this.CUSTOMER_SEARCH_MIN_LENGTH) {
this.getCustomersSubscriptions = this.customerService.getCustomers(searchText).subscribe((response) => {
const custometrsDetails = response['details'];
if (custometrsDetails) {
custometrsDetails.forEach((customer) => {
if ((customer.userName && customer.companyName) || customer.wknCCode) {
this.customers.push({
'ccCode': customer.ccCode,
'companyName': customer.wknCCode ? 'WALKIN CUSTOMER' : customer.companyName,
'userName': customer.wknCCode ? 'WALKIN' : customer.userName,
'accountCode': customer.accountCode,
'companyCode': customer.wknCCode ? 'WLKIN' : customer.companyCode,
'customercode': customer.wknCCode ? 'WALKIN' : customer.customercode,
'street': customer.street,
'place': customer.place,
'countryCode': customer.countryCode,
'email': customer.email,
'mobile': customer.mobile,
'phone': customer.phone
});
}
});
if (this.isFocusOut) {
this.selectCustomer();
}
}
});
}
}
unSubscribeServices() {
if (this.getCustomersSubscriptions) {
this.getCustomersSubscriptions.unsubscribe();
}
}
ngOnDestroy() {
this.unSubscribeServices();
}
}
import{Component，OnInit，Input，OnChanges，HostListener，EventEmitter，Output，OnDestroy}来自'@angular/core'；
从'@angular/forms'导入{FormGroup，Validators}；
从“/customer.service”导入{CustomerService}；
从“../../../shared”导入{CommonService，CUSTOMER_SEARCH_MIN_LENGTH}；
从“../../../../../../../../../node_modules/rxjs”导入{Subscription}；
@组成部分({
选择器：“jhi客户搜索”，
templateUrl:“./customer.component.html”，
样式URL:['./customer.component.css']
})
导出类CustomerSearchComponent实现OnInit、OnChanges和OnDestroy{
@Input（）customerGroup:FormGroup；
@Input（）isFormSubmitted:boolean；
@Input（）是必需的：布尔值；
@Input（）fieldId:string；
@Input（）字段名：字符串；
@Input（）字段占位符：字符串；
@Input（）isReadOnly=false；
@Input（）formControlFieldName:字符串；
@Input（）maxLength:数字；
@Output（）委托者详细信息：EventEmitter=新的EventEmitter（）；
自动：任何；
顾客：有；
验证消息：任何；
formErrors=[]；
isFocusOut=false；
isCustomerSelected=true；
客户搜索最小长度=客户搜索最小长度；
GetCustomerSubscriptions：订阅；
建造师(
私人公共服务：公共服务，
私人客户服务：客户服务
) { }
恩戈尼尼特（）{
this.validationMessages={
[this.formControlFieldName]：{
必填项：“请输入客户名称。”
}
};
}
@HostListener（'change'）ngOnChanges（）{
如果（此.isFormSubmitted）{
this.customerGroup.get（'customer'）.markAsTouched（）；
这是focusManager（false）；
}
这是checkValidations（）；
}
focusManager（isFocusIn=null）{
如果（isFocusIn==真）{
此参数为：customers=[]；
this.customerGroup.get（this.formControlFieldName）.setValidators（[]）；
}
如果（isFocusIn==false）{
this.customerGroup.get（this.formControlFieldName）.setValidators（[]）；
如果（需要本文件）{
this.customerGroup.get（this.formControlFieldName）.setValidators（[Validators.required]）；
}
//如果长度小于所需长度，则检查长度，然后自动将其删除，并在调出焦点时检查搜索的数据是否可用，然后自动选择顶部选项
const searchText=this.customerGroup.get（this.formControlFieldName）.value；
if（searchText&&searchText.length