fix(@angular/cli): improve signal forms lesson examples in AI tutor

[cexbrayat]

PR Checklist

Please check to confirm your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/angular/angular-cli/blob/main/CONTRIBUTING.md#-commit-message-guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

What is the new behavior?

I think a few things could be improved in the new signal forms lesson:

• Use error.kind for tracking in @for loops instead of $index
• Use form submit event instead of button click for better semantics
• Add type="submit" to submit buttons
• Update modules 19 and 20 exercises to reflect best practices

Does this PR introduce a breaking change?

• Yes
• No

Other information

[cexbrayat]

Regarding the usage of [disabled]="loginForm().invalid()" to prevent submission of invalid forms, this pattern has some drawbacks (disabled buttons don't receive focus and may confuse screen reader users, users may not understand why they can't submit).

With signal forms, the submit() utility function already handles validation internally as it marks all fields as touched and only executes your callback if the form is valid. This means you can safely remove the [disabled] binding and let users attempt submission at any time. When they click submit on an invalid form, submit() will automatically mark all fields as touched, triggering the display of all validation errors at once.

I can fix this in the PR if you agree

[MarkTechson]

This is a nice addition, thank you @cexbrayat

LGTM.

[MarkTechson]

Regarding the usage of [disabled]="loginForm().invalid()" to prevent submission of invalid forms, this pattern has some drawbacks (disabled buttons don't receive focus and may confuse screen reader users, users may not understand why they can't submit).

With signal forms, the submit() utility function already handles validation internally as it marks all fields as touched and only executes your callback if the form is valid. This means you can safely remove the [disabled] binding and let users attempt submission at any time. When they click submit on an invalid form, submit() will automatically mark all fields as touched, triggering the display of all validation errors at once.

I can fix this in the PR if you agree

Yeah, I agree with you here actually. You can update the PR.

[cexbrayat]

@MarkTechson Done 👍

[hybrist]

This PR was merged into the repository. The changes were merged into the following branches:

• main: 032257a

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}