Enforce required validation for multi-value props in code component editor
>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3576124. --> Reported by: [vipin.mittal18](https://www.drupal.org/user/319716) Related to !669 >>> <h3>Background</h3> <p>In issue <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3574668" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3574668</a></span>, we introduced validation for single-value props where:</p> <ul> <li>If a prop is marked as <strong>Required</strong></li> <li>Then the <strong>Example Value</strong> field becomes mandatory</li> <li>A validation message is shown if the example value is missing</li> </ul> <p>This is already implemented and working for single-value props.</p> <h3>Problem</h3> <p>Currently, for <strong>multi-value props(<span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3571917" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3571917</a></span>)</strong>, there is no validation behavior when the prop is marked as <strong>Required</strong>.<br> When a user enables:</p> <ul> <li>Required</li> <li>Multi-value</li> </ul> <p>There is no enforcement to ensure that at least one value is added.</p> <h3>Proposed Enhancement</h3> <p>When a prop is configured as: </p><ul> <li>Multi-value = enabled</li> <li>Required = enabled</li> </ul> <p>Then: </p><ul> <li>At least <strong>one value</strong> should be mandatory.</li> <li>Validation should prevent saving if no values are provided.</li> <li>A clear error message should be displayed.</li> </ul> <h3>Suggested Default Behavior (Proposal)</h3> <ul> <li>Enforce <strong>minimum one value required</strong> (not specifically the first index).</li> <li>Show validation message below the multi-value field wrapper.</li> <li>Example message: <em>&ldquo;A required prop must have an example value..&rdquo;</em></li> </ul> <h3>Acceptance Criteria</h3> <ul> <li>When Required = ON and Multi-value = ON: <ul> <li>User cannot save without at least one value.</li> <li>Clear validation message is displayed.</li> </ul> </li> <li>When Required = OFF: <ul> <li>No validation is applied.</li> </ul> </li> <li>Behavior is consistent with single-value required validation logic introduced in #3574668.</li> </ul>
issue