feat(AbstractControlDirective): implement hasError() and getError()

[0x-r4bbit]

Due to #7238 I realised, that when building template-driven forms, we don't have APIs such as hasError() and getError() on control instances.

E.g. having a tiny form like this:

<form>
  <input ngControl="name" #name="ngForm" minlength="3">
  <p *ngIf="name.errors.minlength">Too short!</p>
</form>

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:

<form [ngFormModel]="someFormModel">
  <input ngControl="name" #name="ngForm" minlength="3">
  <p *ngIf="name.hasError('minlength')">Too short!</p>
</form>

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 of Control and ControlGroup and it happens that Control extends AbstractControl which implements hasError() and getError().

We don't have this with template-driven forms, as we're only using the NgControlName directive, which extends NgControl which extends AbstractControlDirective, and that one doesn't implement hasError() or getError().

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 its Control.

Does that make sense?

[0x-r4bbit]

UPDATE

Turns out, ngControl does have a handle to its actual Control instance via

class NgControlName {
...
get control(): Control { return this.formDirective.getControl(this); }
}

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:

<input ngControl="name" #name="ngForm">
<p *ngIf="name.control.hasError('minLength')">...</p>

The control gets only registered the very first time the value of this control changes.

[0x-r4bbit]

UPDATE

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.

Realised I can use the elvis operator to make this work (as this is what we use for expressions that evaluated asynchronously):

<input ngControl="name" #name="ngForm">
<p *ngIf="name.control?.hasError('minLength')">...</p>

However, I still think, that both strategies, template-driven and model-driven, should provide the same API in the template.

[0x-r4bbit]

Further more, it'd be nice to have an API that tells if there are errors at all, so we can do sth. like:

<div *ngIf="controlInstance.hasErrors()">
  <!-- only now check if specific error messages are needed -->
</div>

This could also be done by extending hasError() to work without any argument (currently it requires a string for the error type).

hasError(errorCode: string = null, ...) {
  if (!errorCode) { return isEmpty(this.errors); }
  return isPresent(this.getError(errorCode, path));
}

[wardbell]

it'd be nice to have an API that tells if there are errors at all

I'm confused. We have valid. Isn't that the same thing?

From the plunker in the Forms chapter

<input type="text" class="form-control" required
   [(ngModel)]="model.name"
   ngControl="name"  #name="ngForm" >
<div [hidden]="name.valid || name.pristine" class="alert alert-danger">
  Name is required
</div>

That could have been

 <div *ngIf="!name.valid && !name.pristine" class="alert alert-danger">
   Name is required
 </div>

The valid property isn't precisely the same but I rather doubt you'll find a time when you need the difference.

[wardbell]

I do like the idea of sugaring AbstractControlDirective with getError and hasError methods.

I think it's as simple as adding:

getError(errorCode: string): any {
  return isPresent(this.control) ? this.control.getError(errorCode, this.path) : null;
}

hasError(errorCode: string): boolean {
  return isPresent(this.getError(errorCode, this.path));
}

That's consistent with its errors property

get errors(): {[key: string]: any} {
  return isPresent(this.control) ? this.control.errors : null;
}