Add required validation on value change

[Carla]

Hi,

I have 3 components in a form (1.dropdownlist, 2.multiselect, 3.dropdownlist) and I need to add some dependencies among them. 

The 2nd component should turn into a required component based on the value selected in the 1st component. And being a multiselect, the user needs to select at least one option.

The 3rd component is defaulted to 'No' and has to be changed to 'Yes' when a particular value (I'll call it value 'A') is selected in the 2nd component.

Note that the 2nd component can be left blank on submit if the value selected in the 1st components is '6'. 

Here is a portion of the code, I'm not looking to use cascading components but leave the code as is with the existing data binding:

    <kendo-dropdownlist

      [disabled]="isDisabled()"

      [data]="this.TrackLov"

      [textField]="'TRACK'"

      [valueField]="'TRACK'"

      [valuePrimitive]="true"

      [defaultItem]="trackDefaultItem"

      [(ngModel)]="this.preReview.TRACK"

      [popupSettings]="{height: 100}"

      name="trackDropdown"

      style="width: 190px"

    >

    </kendo-dropdownlist>

 

    <kendo-multiselect

      [disabled]="isDisabled()"

      [data]="tasksListLov"

      [textField]="'NAME'"

      [valueField]="'NAME'"

      [valuePrimitive]="true"

      [placeholder]="'Select one or more tasks'"

      [(ngModel)]="this.preReview.TASKS"

      [popupSettings]="{width: 320}"

      name="tasksMultiselect"

>

    </kendo-multiselect>

<kendo-dropdownlist
  [disabled]="isPreReviewDisabled()"
  [data]="this.targetDesignReviewLov"
  [textField]="'TARGET_DESIGN_REVIEW'"
  [valueField]="'TARGET_DESIGN_REVIEW'"
  [valuePrimitive]="true"
  [(ngModel)]="this.preReview.TARGET_DESIGN_REVIEW"
  name="targetDesignReviewDropdown"
  [popupSettings]="{height: 100}"
  style="width: 190px">
</kendo-dropdownlist>

 

Thanks,

Carla

 

[Martin Bechev]

Hello Carla,

Thank you for the provided code snippet.

In order to achieve the desired functionality, the fields should be marked as required dynamically. Each of the components emits valueChange event every time when an item is selected.

In the event handler, the developer can toggle the required property, depending on some custom conditions, for the next fields. Here is an example demonstrating the approach:

https://stackblitz.com/edit/angular-gwlkaz

Based on the DropDownList value, the second component is required or not:

<kendo-multiselect
          #size
          name="sizeValue"
          [data]="sizes"
          [textField]="'text'"
          [valueField]="'value'"
          [(ngModel)]="sizeValue"
          [required]="isRequired"
        >
        </kendo-multiselect>

I hope this helps. Let me know if I can assist any further.

Regards,
Martin
Progress Telerik