Can't valid and retrieve value from child component

[c]

I work with the planning appointments. I added in the editor, an autocomplete component instead of the 'location' field. This component will be used in several places in my application. I added a validation rule on this field (required).

I manage to retrieve the selected value and send it to the parent using the function: (click) = "selectLocation (data)

my problem is that validation doesn't work.

Another problem, when I save my event, I don't get the value of my autocomplete field either.

Thanks so much

<div class="form-group mb-4">

<label for="lieu" class="e-textlabel required">Lieu *</label>

<app-azure-maps-autocomplete id="lieu" name="lieu" [defaultAddress]="data.lieu?.adresse" label="Lieu" (change)="onChange($event)" (setLocation)="onSetLocation($event)">

</app-azure-maps-autocomplete>

</div>

// inside my component app-azure-maps-autocomplete

<ejs-autocomplete #autocomplete [attr.id]="name" [attr.name]="name" [dataSource]="data" [fields]="fields" (filtering)="onFiltering($event)" [htmlAttributes]="htmlAttributes" [enablePersistence]="true" [value]="defaultAddress">

<ng-template #itemTemplate="" let-data="">

<div class="list" (click)="selectLocation(data)">

<strong *ngIf="data.poi?.name" class="mb-0 pb-0">{{ data.poi?.name }}</strong>

<div class="mt-0">{{ data.address?.freeformAddress }} {{ data.address?.country }}</div>

</div>

</ng-template>

</ejs-autocomplete>

[Ravikumar Venkatesan]

Dear Customer, 

Greetings from Syncfusion support. 

my problem is that validation doesn't work 

We have validated your above query at our end. We have set the validation to the autocomplete component like the below code. 

[app.component.html] 

              <ejs-autocomplete name="Country" id='Country' class="e-field" value='{{data.Location}}' [dataSource]='countriesData' [fields]='fields' (change)="onChange($event)" 

                data-name="Location"> 

                <ng-template #itemTemplate let-data=""> 

                  <div class="list" (click)="selectLocation(data)"> 

                    <span><span class='name'> {{data.Country?.Name + ' - '}}</span><span class ='city'>{{data.Code?.Id}}</span></span> 

                  </div> 

                </ng-template> 

              </ejs-autocomplete> 

[app.component.ts] 

      const formElement: HTMLElement = args.element.querySelector('.e-schedule-form') as HTMLElement; 

      this.validator = (formElement as EJ2Instance).ej2_instances[0] as FormValidator; 

      this.validator.addRules('Country', { required: true }); 

I save my event, I don't get the value of my autocomplete field 

We have validated your above query at our end. We have achieved it with the help of the below code. 

[app.component.ts] 

  onPopupClose(args: PopupCloseEventArgs): void { 

    if (args.type === "Editor" && args.data) { 

      let location = ((args.element.querySelector("#Country") as EJ2Instance).ej2_instances[0] as AutoComplete).value; 

      (args.data as any).Location = location; 

    } 

  } 

Sample: https://stackblitz.com/edit/angular-ej2-schedule-editor-template-validation-customiz-ptzhmn?file=app.component.ts 

Kindly try the above sample and get back to us if you would require further assistance. 

Regards, 

Ravikumar Venkatesan 

[c]

Thanks you. I can resolve my bugs. But I get another. Do you know , why I can't navigation with the touches of my keyboard inside the list from the component autocomplete ?

[Ravikumar Venkatesan]

Dear Customer, 

Thanks for the update. 

We are happy that your previous problem resolved. 

And, we are tried to understand another problem that “can’t navigation with the touches of the keyboard” but we couldn’t understand the problem. But, we suspect that you can’t select the AutoComplete listed values by touch but this could be working fine at our end. 

If this is not your situation, kindly share more details about your problem like video demo/images to serve you better. 

Regards, 

Ravikumar Venkatesan