docs: add doc to focusBoundControl feature#67667
docs: add doc to focusBoundControl feature#67667rblmdst wants to merge 3 commits intoangular:mainfrom
Conversation
|
Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA). View this failed invocation of the CLA check for more information. For the most up to date status, view the checks section at the bottom of the pull request. |
577edbf to
20f3aeb
Compare
| @Component({/* ... */}) | ||
| export class PasswordInput implements FormValueControl<string> { | ||
| readonly value = model<string>(''); | ||
| readonly passwordCtrl = viewChild.required<ElementRef>('passwordCtrl'); |
There was a problem hiding this comment.
You can specify the type in the generic ElementRef so we avoid having to do the casting later.
| readonly passwordCtrl = viewChild.required<ElementRef>('passwordCtrl'); | |
| readonly passwordCtrl = viewChild.required<ElementRef<HTMLInputElement>>('passwordCtrl'); |
|
|
||
| ### Preventing scroll | ||
|
|
||
| If the target control is outside the viewport and you want to focus it without triggering a scroll, pass `{ preventScroll: true }`: |
There was a problem hiding this comment.
We could add a link in preventScroll or in focus to clarify what preventScroll does. Normally we reference MDN for this
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#preventscroll
|
The topic covered seem to be a bit small the justify a dedicated guide. Also currently this file is orphan, it's isn't referenced in |
…isting field state doc
|
|
||
| ### Custom controls | ||
|
|
||
| By default, calling `focusBoundControl()` on a custom control has no effect. Because a custom control can contain multiple native inputs (for example, a date picker with separate day, month, and year fields), Angular cannot determine which element should receive focus or what action to perform. |
There was a problem hiding this comment.
| By default, calling `focusBoundControl()` on a custom control has no effect. Because a custom control can contain multiple native inputs (for example, a date picker with separate day, month, and year fields), Angular cannot determine which element should receive focus or what action to perform. | |
| By default, calling `focusBoundControl()` on a custom control has no effect because a custom control can contain multiple native inputs. For example, a date picker can contain separate day, month, and year fields. As a result, Angular cannot determine which element should receive focus or what action to perform. |
|
|
||
| Checking both `touched()` and validation state ensures styles only appear after the user has interacted with the field. | ||
|
|
||
| ## Focus a form control bound to a form field |
There was a problem hiding this comment.
| ## Focus a form control bound to a form field | |
| ## Focus a form control bound to a form field | |
| ```ts | ||
| registrationForm.email().focusBoundControl({ preventScroll: true }); | ||
| ``` | ||
|
|
| } | ||
| } | ||
| ``` | ||
|
|
|
|
||
| This guide covered validation and availability status handling, interaction tracking and field state propagation. Related guides explore other aspects of Signal Forms: | ||
|
|
||
|
|
| This guide covered validation and availability status handling, interaction tracking and field state propagation. Related guides explore other aspects of Signal Forms: | ||
|
|
||
|
|
||
|
|
bencodezen
left a comment
There was a problem hiding this comment.
Thanks for the PR @rblmdst! I made a suggestion to improve the writing flow for one paragraph.
Otherwise, if you could clean up the new line breaks (some have zero and some have two) to be consistent and address the other suggestions in the review, I think we should be go to ship this!
63c0df9 to
6f496f8
Compare
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information