UKHO / admiralty-design-system

MIT License
4 stars 0 forks source link

[Feature] admiralty-input - admiralty-input-error to be hidden to allow custom validation #98

Open developernm opened 10 months ago

developernm commented 10 months ago

As you can see in the image provided, we need to have the ability to render a custom error input that spans across both inputs, however the admiralty-input-error is still visible in the HTML of admiralty-input and can cause spacing issues when doing this. (Causes the custom validation to be rendered to far away from the actual input, due to the space being reserved)

What I suggest (unless there is an alternative way) is to have the option to set a flag to true or false in order to have it save the space for standard validation or to remove the space to allow custom validation. eg: [custom-validation]="true" || [custom-validation]="false". (feel free to change the name to something more appropriate)

          <div formGroupName="surveyDateRange" class="level pt-4">
            <div class="level-item is-justify-content-left mr-4">
              <admiralty-input formControlName="startDate"
                               [label]="'Start Date *'"
                               [name]="'Start Date'"
                               [invalid]="isStartDateInvalid()"
                               [invalidMessage]="validateStartEndDates(form.controls.surveyDateRange, 'startDate')"
                               class="is-full-width"
                               type="date"></admiralty-input>
            </div>
            <div class="level-item is-justify-content-right ml-4">
              <admiralty-input formControlName="endDate"
                               [label]="'End Date *'"
                               [name]="'End Date'"
                               [invalid]="isEndDateInvalid()"
                               [invalidMessage]="validateStartEndDates(form.controls.surveyDateRange, 'endDate')"
                               class="is-full-width"
                               type="date"></admiralty-input>
            </div>
          </div>

image image

KatiePUX commented 2 months ago

Katie to liaise with Naran re: whether this is still an issue

KatiePUX commented 1 month ago

KP liaised with NM - error message needs to expands across the two input fields - best practise for content design