Angular 4 ngIf inside ngFor not functioning as expected -

the issue having not getting expected functionality out of *ngif statement inside *ngfor. using iterate through custom validation messages , each ngif has unique statement. following component.html file working with:

<div class="form-group"> <label for="{{title}}">first name:</label> <input type="text" class="form-control" id="{{title}}" name="{{title}}" [(ngmodel)]="vm.title" [ngmodeloptions]="{standalone: true}" #title="ngmodel" minlength="{{minlength}}" maxlength="{{maxlength}}" required /> <div *ngif="title.errors && (title.dirty || title.touched)" class="alert alert-danger">     <div *ngfor="let validation of validations">         <div *ngif="validation.method">{{validation.message}}</div>     </div> </div> 

and here component.ts file:

import { component, input, oninit, viewencapsulation } '@angular/core';  @component({     selector: 'textbox',     templateurl: './textbox.component.html',     styleurls: ['./textbox.component.css'] })  export class textboxcomponent implements oninit {     @input('title') title: string;     @input('required') required: boolean;     @input('required-message') requiredmessage: string;     @input('min-length') minlength: number;     @input('min-length-message') minlengthmessage: string;     @input('max-length') maxlength: number;     @input('max-length-message') maxlengthmessage: string;     validations: validation[] = [];      public vm: signup;      ngoninit() {         this.vm = new signup();         if (this.required) {             if (this.requiredmessage[0] != "") {                 this.validations.push(new validation(this.title + ".errors.required", this.requiredmessage));             } else {                 this.validations.push(new validation("!" + this.title + ".errors.required", "first name required"));             }         } else {             //make not required         }         if (this.minlength) {             if (this.minlengthmessage) {                 this.validations.push(new validation(this.title + ".errors.minlength", this.minlengthmessage));             } else {                 this.validations.push(new validation("!" + this.title + ".errors.minlength", "minimun length " + this.minlength));             }         }         if (this.maxlength) {             if (this.maxlengthmessage) {                 this.validations.push(new validation(this.title + ".errors.maxlength", this.maxlengthmessage));             } else {                 this.validations.push(new validation("!" + this.title + ".errors.maxlength", "maximun length " + this.maxlength));             }         }         (var = 0; > this.validations.length; i++) {             console.log(this.validations[i].method);             console.log(this.validations[i].message);         }     } } export class signup {     namefirst: string;     namelast: string;     username: string;     password: string; } export class validation {     constructor(public method: string, public message: string) {         console.log(method);         console.log(message);     } } 

i calling component component this:

<div class="row">     <form #form="ngform">         <div class="form-group">             <textbox [title]="'namefirst'" [required]="true" [required-message]="'required message test'" [min-length]="5" [min-length-message]="'minimum length test'" [max-length]="10" [max-length-message]="'maximum length test'"></textbox>         </div>     </form> </div> 

what ends happening validation messages display regardless of whether should triggered. example, "max length test" showing though i'm no near max # of characters.

here plunkr play around functionality: https://plnkr.co/edit/igq9wxshvatz7zz0aaju

<div *ngif="validation.method">{{validation.message}}</div> 

you're having message show long validation.method exists. every time create validation, you're doing this:

new validation(this.title + ".errors.minlength", this.minlengthmessage)

the validation's method property string , never empty, *ngif directive evaluating true.