FormValidator in DropDown Tree

[Max Melcher]

Hi, 

I want to ensure that a users selects a value in the dropdown tree component in a schedule editor dialog - but I cant make it work with the FormValidator. 

Template:

<input title="hidden" id='assetId' type="hidden" name="assetId"  data-name="assetId" class="e-field"

                                [(value)]="reservationEditorAssetIds" required>

                           

                                <ejs-dropdowntree required  class=""

                                [(value)]="reservationEditorAssetIds" #reservationEditorAssetInput allowFiltering="true"

                                allowMultiSelection="true"

                                [fields]="{dataSource: storageService.inventory?.categories, value: 'Id', text: 'name', child: 'assets' }"></ejs-dropdowntree>

Code:

if (!isNullOrUndefined(document.getElementById("assetId_Error") as any)) {

        document.getElementById("assetId_Error")!.style.display = "none";

        document.getElementById("assetId_Error")!.style.left = "351px";

      }

      let formElement: HTMLElement = <HTMLElement>args.element.querySelector('.e-schedule-form');

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

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

I tried to make it work with a hidden textbox - but that does not show the required tooltip at all.

How can show the 'This field is required' message? 

Thanks,

Max

[SureshRajan Alagarsamy]

Hi Max,

We have reviewed your query and understand that you are looking to ensure the user selected item from Dropdown Tree component using Form Validator. We would like to inform you that we have successfully implemented a form with the DropDown Tree component, allowing for validation to ensure an item is selected before submission.

Refer to the below code snippet for further reference.

[app.component.html]

<form [formGroup]="form" (ngSubmit)="submit()">

        <ejs-dropdowntree

          #sample

          id="default"

          (change)="onChange($event)"

          .....

        ></ejs-dropdowntree>

        <div

          *ngIf="selectedItem?.invalid && selectedItem?.touched"

          style="color: red;"

        >

          The selected item is required.

        </div>

        <button type="submit">Submit</button>

 </form>

[app.component.ts]

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { ReactiveFormsModule } from '@angular/forms'; // Import ReactiveFormsModule

.....

@Component({

  ....

  imports: [DropDownTreeModule, ReactiveFormsModule, CommonModule],

})

export class AppComponent {

  form: FormGroup;

  constructor(private fb: FormBuilder) {

    this.form = this.fb.group({

      selectedItem: [null, Validators.required], // Add validation

    });

  }

  submit(): void {

    if (this.form.valid) {

      // Handle valid form submission

      console.log('Form Submitted', this.form.value);

    } else {

      // Mark all fields as touched to show validation messages

      this.form.markAllAsTouched();

    }

  }

  get selectedItem() {

    return this.form.get('selectedItem');

  }

   .....

}

We have also attached a sample for your reference.

Sample: https://stackblitz.com/edit/angular-1nyib2-sqttt2?file=src%2Fapp.component.html

Regards,

Suresh.