Provide a general summary of the issue here

sl-form throws a runtime error if custom components are included in the form after calling the forms reportValidity method

<sl-form>
 <foo></foo>
 // other SLDS controls
</sl-form>

this.form.reportValidity(); <- throws an error

reportValidity method of the form tries to call the reportValidity of all controls in the form, but the custom component foo does not implement this method. Resulting in the error below:

form.js:114 Uncaught (in promise) TypeError: c.reportValidity is not a function
    at form.js:114:39
    at Array.map (<anonymous>)
    at Form.reportValidity (form.js:114:26)
    at GradePeriodsForm.checkValidity (grade-periods-form.ts:297:36)
    at NewGradePeriod.checkValidity (grade-periods-new.ts:170:22)
    at NewGradePeriod.onSave_fn (grade-periods-new.ts:189:40)

🤔 Expected Behavior?

form should only call reportValidity method of SLDS controls or should check if this method is implemented.

😯 Current Behavior

throws an error

💁 Possible Solution

implement a dummy method

reportValidity(): boolean {
   return true;
}

🖥️ Steps to Reproduce

please see this repository to reproduce the issue https://github.com/fransdeboer/sl-form-report-validity

What browsers are you seeing the problem on? (only for bugs in code)

Safari, Chrome

If other, please specify.

No response

What operating system are you using?

WSL

👤 Your name

Frans de Boer

🧢 Your product/team

Magister

🎨 Your Theme(s)

Magister