-
Notifications
You must be signed in to change notification settings - Fork 25k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(AbstractControlDirective): implement hasError() and getError() #7255
Comments
UPDATE Turns out,
However, that one doesn't help either, as the control itself is not registered yet at the point we're accessing it from the template:
The control gets only registered the very first time the value of this control changes. |
UPDATE
Realised I can use the elvis operator to make this work (as this is what we use for expressions that evaluated asynchronously):
However, I still think, that both strategies, template-driven and model-driven, should provide the same API in the template. |
Further more, it'd be nice to have an API that tells if there are errors at all, so we can do sth. like:
This could also be done by extending
|
I'm confused. We have From the plunker in the Forms chapter
That could have been
The |
I do like the idea of sugaring I think it's as simple as adding:
That's consistent with its
|
Allows cleaner expressions in template-driven forms. Before: <label>Username</label><input name="username" ngModel required #username="ngModel"> <div *ngIf="username.dirty && username.control.hasError('required')">Username is required</div> After: <label>Username</label><input name="username" ngModel required #username="ngModel"> <div *ngIf="username.dirty && username.hasError('required')">Username is required</div> Fixes angular#7255
Allows cleaner expressions in template-driven forms. Before: <label>Username</label><input name="username" ngModel required #username="ngModel"> <div *ngIf="username.dirty && username.control.hasError('required')">Username is required</div> After: <label>Username</label><input name="username" ngModel required #username="ngModel"> <div *ngIf="username.dirty && username.hasError('required')">Username is required</div> Fixes angular#7255
Allows cleaner expressions in template-driven forms. Before: <label>Username</label><input name="username" ngModel required #username="ngModel"> <div *ngIf="username.dirty && username.control.hasError('required')">Username is required</div> After: <label>Username</label><input name="username" ngModel required #username="ngModel"> <div *ngIf="username.dirty && username.hasError('required')">Username is required</div> Fixes angular#7255
Allows cleaner expressions in template-driven forms. Before: <label>Username</label><input name="username" ngModel required #username="ngModel"> <div *ngIf="username.dirty && username.control.hasError('required')">Username is required</div> After: <label>Username</label><input name="username" ngModel required #username="ngModel"> <div *ngIf="username.dirty && username.hasError('required')">Username is required</div> Fixes angular#7255
Allows cleaner expressions in template-driven forms. Before: <label>Username</label><input name="username" ngModel required #username="ngModel"> <div *ngIf="username.dirty && username.control.hasError('required')">Username is required</div> After: <label>Username</label><input name="username" ngModel required #username="ngModel"> <div *ngIf="username.dirty && username.hasError('required')">Username is required</div> Fixes angular#7255
Allows cleaner expressions in template-driven forms. Before: <label>Username</label><input name="username" ngModel required #username="ngModel"> <div *ngIf="username.dirty && username.control.hasError('required')">Username is required</div> After: <label>Username</label><input name="username" ngModel required #username="ngModel"> <div *ngIf="username.dirty && username.hasError('required')">Username is required</div> Fixes angular#7255
…11985) Allows cleaner expressions in template-driven forms. Before: <label>Username</label><input name="username" ngModel required #username="ngModel"> <div *ngIf="username.dirty && username.control.hasError('required')">Username is required</div> After: <label>Username</label><input name="username" ngModel required #username="ngModel"> <div *ngIf="username.dirty && username.hasError('required')">Username is required</div> Fixes #7255
…ngular#11985) Allows cleaner expressions in template-driven forms. Before: <label>Username</label><input name="username" ngModel required #username="ngModel"> <div *ngIf="username.dirty && username.control.hasError('required')">Username is required</div> After: <label>Username</label><input name="username" ngModel required #username="ngModel"> <div *ngIf="username.dirty && username.hasError('required')">Username is required</div> Fixes angular#7255
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. |
Due to #7238 I realised, that when building template-driven forms, we don't have APIs such as
hasError()
andgetError()
on control instances.E.g. having a tiny form like this:
We always have to walk down the properties of
ngControl
instance to access the error type.However, when this same form is built model-driven, all of a sudden we have additional APIs:
What makes the difference, even though we seem to work with the same instance?
Well, when building model-driven forms, the form model is built in the component and then associated to a form in the DOM using
[ngFormModel]
. The model consists ofControl
andControlGroup
and it happens thatControl
extendsAbstractControl
which implementshasError()
andgetError()
.We don't have this with template-driven forms, as we're only using the
NgControlName
directive, which extendsNgControl
which extendsAbstractControlDirective
, and that one doesn't implementhasError()
orgetError()
.I'd expect the same APIs in the template no matter if I'm building template-driven forms or model-driven forms. So I propose extending
AbstractControlDirective
accordingly, as it has access to itsControl
.Does that make sense?
The text was updated successfully, but these errors were encountered: