feat: avoid internal validation before interacting with input

[danielleroux]

💡 What is the current behavior?

GitHub Issue Number: Fixes #1680 #1638

🆕 What is the new behavior?

• Stop validate required if never interacted with input
• Add flag to value accessor to prevent default classmapping between ng- and ix- classes

<form
  class="form-validation-example"
  [formGroup]="exampleForm"
  (ngSubmit)="submit()"
>
  <ix-input
    label="Name:"
    helperText="Write down your name"
    invalidText="Value is required"
    formControlName="name"
    [suppressClassMapping]="true"
    [class.ix-invalid]="!exampleForm.get('name')!.valid && exampleForm.get('name')!.touched"
    required
  >
  </ix-input>
  <ix-button type="submit" [disabled]="!exampleForm.valid">Submit</ix-button>
</form>

• value-accessor ignores an invalid NgControl if it has a required validation which shows and display and the control is never touched.

🏁 Checklist

A pull request can only be merged if all of these conditions are met (where applicable):

• 🦮 Accessibility (a11y) features were implemented
• 🗺️ Internationalization (i18n) - no hard coded strings
• 📲 Responsiveness - components handle viewport changes and content overflow gracefully
• 📄 Documentation was reviewed/updated (pnpm run docs)
• 🧪 Unit tests were added/updated and pass (pnpm test)
• 📸 Visual regression tests were added/updated and pass (Guide)
• 🧐 Static code analysis passes (pnpm lint)
• 🏗️ Successful compilation (pnpm build, changes pushed)

👨‍💻 Help & support

[changeset-bot]

🦋 Changeset detected

Latest commit: 9db50b0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@siemens/ix-angular	Minor
@siemens/ix	Minor
@siemens/ix-aggrid	Patch
@siemens/ix-react	Minor
@siemens/ix-vue	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[jul-lam]

Jsut a minor unimportant thing: maybe we could also add a textarea story.

One thing I was thinking about while reviewing is that we could also do something similar like angular does, setting the ix-invalid--required regardless, but applying the css only if also ix-touched is present. We could also do this over our ValueAccessor in angular, where we only apply the mapping of ix-invalid--required if ng-invalid and ng-touched is present.

[danielleroux]

Jsut a minor unimportant thing: maybe we could also add a textarea story.

One thing I was thinking about while reviewing is that we could also do something similar like angular does, setting the ix-invalid--required regardless, but applying the css only if also ix-touched is present. We could also do this over our ValueAccessor in angular, where we only apply the mapping of ix-invalid--required if ng-invalid and ng-touched is present.

Let me check, maybe we can implement it that way.

[sonarqubecloud]

Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[jul-lam]

I really like the solution now!

[jul-lam]

Suggested change

	name: new FormControl('', Validators.compose([Validators.required])),
	name: new FormControl('', Validators.required),

[jul-lam]

Suggested change

required

[jul-lam]

We don't need required since we have the Angular Validator set. One thing I noticed is that we could set the "required"-star on the label based on the ix-required class.

[jul-lam]

Suggested change

required

[jul-lam]

We don't need required since we have the Angular Validator set.

[jul-lam]

Suggested change

	<ix-input formControlName="name" [required]="true"> </ix-input>
	<ix-input formControlName="name"> </ix-input>

[jul-lam]

We don't need required since we have the Angular Validator set.