fix(examples): fix form-field-custom-control #15147
Conversation
googlebot
added
the
cla: yes
|
@crisbeto would you mind taking a look? Thank you |
| _handleBlur(event: FocusEvent): void { | ||
| const inputs = Array.from(this.elRef.nativeElement.querySelectorAll('input')); | ||
|
|
||
| if (!inputs.some(input => event.relatedTarget === input)) { |
There was a problem hiding this comment.
Isn't this guaranteed to always be true? The only inputs that have the listener are the ones inside the elRef from what I can tell.
There was a problem hiding this comment.
@crisbeto there are scenarios in which this evaluates to false. For example, if the user clicks an entirely different form control (which receives focus) then the blur event's relatedTarget will not be equal to one of the three input elements defined in MyTelInput's template.
My rationale is that if the user is changing focus between the three input elements there's no need to mark the form control as touched. However, if they focus on any element other than one of the three inputs it is appropriate to mark the form control as touched.
There was a problem hiding this comment.
That makes sense, although I remember relatedTarget being flaky on some browsers. This would be a bit cleaner if you used the CDK focus monitor with subtree monitoring.
There was a problem hiding this comment.
@crisbeto thanks. The code is cleaner when relying on the CDK focus monitor.
* Update `MyTelInput` to implement `ControlValueAccessor` interface * Resolves angular#14810
swseverance
force-pushed
the
custom-form-field-control
branch
from
d0bcf79 to
d47c68e
Compare
| this.parts = fb.group({ | ||
| area: '', | ||
| exchange: '', | ||
| subscriber: '', | ||
| }); | ||
|
|
||
| fm.monitor(elRef, true).subscribe(origin => { | ||
| if (this.focused && !origin) { |
There was a problem hiding this comment.
nit: I think that we can safely assume that focused will always be true when the origin == null, because you can't blur an element that doesn't have focus.
crisbeto
added
pr: lgtm
action: merge
jelbourn
added
the
merge: fix commit message
|
I tried adding validators.required to the 'parts' form group and while it works for the form control, the form component that is using this form control won't recognize the validation. Can someone implement the validation please? |
|
@Alex-Samari did you happen to try this by modifying the StackBlitz on https://material.angular.io/guide/creating-a-custom-form-field-control? It appears that the changes I made are not yet deployed to StackBlitz. |
|
@swseverance No, I'm working on my own project and followed the changes you made in the gitHub repo. The value accessor works and I'm able to change the value of the custom form control but when I add validators to the form group, I can't access those validators in the parent component that is using the custom form control |
|
@Alex-Samari Is there a branch I can look at? You can just email me directly if you'd like. My email is on my profile. |
|
@swseverance I couldn't find your email but here's a repository I made of what I have: I'm using the custom-tel-control inside my form component |
|
@Alex-Samari I didn't implement validation as part of https://stackblitz.com/edit/angular-byencm?file=app%2Fform-field-custom-control-example.ts my email is [email protected] |
|
@swseverance Thank you! Validation is working perfectly fine now 👍 |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
MyTelInputto implementControlValueAccessorinterface