CK110/ngx-validate-tooltip

Angular FormValidate Tooltip

NgValidateTooltip

a validate tooltip built with Angular4 inspired by PrimeNG

Installation

npm i ngx-validate-tooltip --save

Usage

Import In AppModule

....
+ import {ValidateMsgService, ValidateTooltipModule} from 'ngx-validate-tooltip';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
+    ValidateTooltipModule,
  ],
  providers: [
+    ValidateMsgService
    // { provide: ValidateMsgService, useClass: CustomValidateMsgService }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use In Templete

// app.component.html
<form [formGroup]="ngForm" >
  <app-validate-tooltip [control]="ngForm.get('start')">
    <input pInputText formControlName="start">
  </app-validate-tooltip>

  <app-validate-tooltip [control]="ngForm.get('end')">
    <input pInputText formControlName="end">
  </app-validate-tooltip>

  <app-validate-tooltip [control]="ngForm.get('city')">
    <input pInputText formControlName="city">
  </app-validate-tooltip>
</form>

// app.component.ts
export class AppComponent implements OnInit{

  ngForm: FormGroup;

  constructor(private fb: FormBuilder) {

  }

  ngOnInit() {
    this.ngForm = this.fb.group({
      start: ['', [Validators.required, Validators.minLength(4)]],
      end: ['', [Validators.required, Validators.minLength(4)]],
      city: ['', []],
      address: ['', [Validators.required, Validators.minLength(4)]],
    });
  }
}

Custom Your Own ValidateMsg

like this And You should import in AppModule.

  providers: [
    //ValidateMsgService
+     { provide: ValidateMsgService, useClass: CustomValidateMsgService }
  ],