md-error with *ngIf doesn't work

[thisisgit]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

boolean is passed to *ngIf and supposed to switch on when it is true

What is the current behavior?

md-error with *ngIf doesn't work at all. It only responds on predefined directives like required.

What are the steps to reproduce?

<md-input-container> <input mdInput [(ngModel)]="sample" name="sample" (keyup)="validateInput()"> <md-error *ngIf="isError">{{errMsg}}</md-error> </md-input-container>
Validate input on every keyup and set isError to true if the input is invalid.

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, browsers are affected?

angular 4.0.0, material 2.0.0-beta.3, macOS10.12.4, chrome

Is there anything else we should know?

[crisbeto]

We use the error with ngIf in our demo and it works fine. This is most likely an issue with your setup.

[jelbourn]

Closing since we cannot reproduce; feel free to open a new issue if you have a reproduction.

[jamieathans]

I am seeing this behaviour as well using the latest version of Material (2.0.0-beta.3).

Just to re-iterate, I can only get the md-error to show up using the predefined directives (e.g required, minlength, maxlength).

Could it have something to do with the fact that @thisisgit and I are using template-driven forms and the demo referenced by @crisbeto uses model-driven/reactive?

[zlepper]

I'm also seeing this. Even hardcoding the *ngIf result to be true the error message still doesn't appear.

<md-input-container>
    <input mdInput [(ngModel)]="fromInput">
    <md-error *ngIf="true">Error message</md-error>
</md-input-container>

Also using template-driven form here.

[crisbeto]

Can you put together a Plunkr that shows the issue @zlepper? You can use this as a template.

[zlepper]

@crisbeto http://plnkr.co/edit/q4ERXhznMsvbqSiyddfA
Apparently i can't get neither normal validation or just hardcoding the error to true working now.

[crisbeto]

Both of the cases in the Plunkr don't work, because you don't have a ControlValueAccessor (e.g. an ngModel or formControl). The errors are supposed to show up when there is a ControlValueAccessor that is invalid and touched.

[zlepper]

And how do we make the ControlValueAccessor invalid when it's not one of the build in validations jamieathans mentioned above?

I have edited the plunkr so the input field for the email now becomes red because something is wrong, but the md-error is still nowhere to be found: http://plnkr.co/edit/DYNUmQTxiJxnO28E1Uqz?p=preview

[crisbeto]

There a couple of issues with your examples:

1. The first one that is ngIf="true" (you can remove this btw), doesn't have any validation set up. If you add a required attribute it'll work.
2. The #emailInput refers to the DOM element, not the instance of ngModel. You can get it working by changing it to #emailInput="ngModel".

Here's a forked Plunkr with the above-mentioned changes. Note that to enable Angular's built-in email validation, you have to add the email attribute.

[zlepper]

Alright, however that still doesn't allow for custom validation error messages in the template-driven model, which is what I wanted to demonstrate with the first example by hardcoding the error message to always be there. The value should come from a custom validation like in the OP.

Said custom validation might go to an external server and fetch a result which indicates if the value is valid (Checking if a username is available on signup for example).

[crisbeto]

Yes it does, the default validators go through the exact same pipeline as the custom ones. Can you post the custom validator that you're trying to use?

As an aside, you can see some usage examples in our demo app.

[zlepper]

Alright, thanks to your help i managed to figure it out, and can also say that it is working as intended. In short what i have done:

Create a custom validator

import {AbstractControl, NG_VALIDATORS, Validator} from "@angular/forms";
import {Directive, forwardRef} from "@angular/core";

const END_WITH_API_REGEX = /.*\/api\/?$/;

@Directive({
  selector: '[noApi][ngModel],[noApi][formControl]',
  providers: [
    { provide: NG_VALIDATORS, useExisting: forwardRef(() => NoApiValidator), multi: true }
  ]
})
export class NoApiValidator implements Validator {
  validate(c: AbstractControl): { [key: string]: any; } {
    return END_WITH_API_REGEX.test(c.value) ? {validateApi: false} : null
  }
}

Added it to my declarations:

@NgModule({
  declarations: [
    AppComponent, 
      [...],
    NoApiValidator
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
      [...]
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

And used it for something:

<md-input-container>
    <input mdInput placeholder="url" [(ngModel)]="url" type="url" required noApi #urlInput="ngModel">
    <md-error *ngIf="urlInput.errors">Something was wrong</md-error>
</md-input-container>

I thank you for your time, especially since it was a user error.

[WildDev]

+1 to see this working with optional relying on *ngIf, since the purpose of the md-error is quite trivial.

That would be useful for the server-side validation reflection.