Giter VIP home page Giter VIP logo

ngx-validate's Introduction

NgxValidate

This project is still a work-in-progress and, although it works fine, it should be used with caution.

Live demo

Stackblitz Example

Installation

yarn add @ngx-validate/core

or

npm install @ngx-validate/core

Usage

Import core module to your main module as follows:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgxValidateCoreModule } from '@ngx-validate/core';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, ReactiveFormsModule, NgxValidateCoreModule.forRoot()],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Roadmap

  • Dynamic display of validation errors

  • Support for error blueprints with parameters

  • Separate directives to mark style and render targets in DOM

  • Meaningful defaults, instant start

  • Flexible configuration on module, form group, and form control level

  • Permissive license (MIT)

  • Usage documentation

  • GitHub Pages implementation

  • Issue submission template

  • Contribution documentation

  • Tests

ngx-validate's People

Contributors

armanozak avatar bibekgg avatar bnymncoskuner avatar denizguzel avatar dependabot[bot] avatar mahmut-gundogdu avatar mehmet-erim avatar mehmetakifalp avatar muhammedaltug avatar semyonic avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ngx-validate's Issues

form.reset() trigger validation and shown error on NgSubmit(). I can't turn initial state after the submit without error

Describe the bug
I want to clear the form after the summit form (when The form is valid)

To Reproduce
here Stackblitz.

https://stackblitz.com/edit/ngx-validate-hl9k2w
Steps to reproduce the behavior:

Expected behavior
The form should turn initial state without showing any error.

Hacky solution:

submit() {
    if (!this.form.valid) return;
    setTimeout(() => this.form.reset()); // it works when it rn in setTimeout
  }

https://stackblitz.com/edit/ngx-validate-tukzce?file=src/app/components/app.component.ts

"Ivy" distribution

This is what angular says every time when I build my project:

Generating browser application bundles (phase: setup)...Processing legacy "View Engine" libraries:

Guess someone has to make the encouragement!

formControl blueprint is replacing the module level blueprint

Describe the bug
When we have custom error message blueprint on module level and when we modify any one of the blueprint in the formControl level, custom blueprint of module is being replaced by this.

To Reproduce
Steps to reproduce the behavior:

  1. Go to 'here'
  2. Type test on Username field
  3. It doesn't show invalidUsername error.

Expected behavior
I think it shouldn't replace whole blueprint but only replace the specific key.

Message error in custom position targetSelector

Im working on angular 9, and i want put the custom component in a special position of material input field; the problem is that the targetSelector: '.special-class', not is being processed, and the custom component message is placed on another targetSelector. How we must use the targetSelector?

To Reproduce
In app.module.ts (import section)

NgxValidateCoreModule.forRoot({`
      errorTemplate: ValidationErrorComponent,
      targetSelector: '.special-class',
    }),
  `],

Error when removing control from FormArray

Hello! I have a form in which sections can be added or removed by the user by using a FormArray like this:

private buildForm() {
  const dynamicSections = this.fb.array([this.createSection()]);
  this.form = this.fb.group({ dynamicSections });
}

public get getSections(): FormArray {
  return this.form.get('dynamicSections') as FormArray;
}

public addSection(): void {
  this.getSections.push(this.createSection());
}

private createSection(): FormGroup {
  return this.fb.group({
    prop1: [null],
    prop2: [null],
  });
}

public removeSection(index: number): void {
  this.getSections.removeAt(index);
}

However, when a section is removed, I am getting the following error:

ERROR TypeError: Cannot read property 'errors' of null
    at MapSubscriber.eval [as project] (validation.directive.ts:137)
    at MapSubscriber._next (map.ts:84)
    at MapSubscriber.Subscriber.next (Subscriber.ts:99)
    at FilterSubscriber._next (filter.ts:101)
    at FilterSubscriber.Subscriber.next (Subscriber.ts:99)
    at MergeMapSubscriber.notifyNext (mergeMap.ts:162)
    at SimpleInnerSubscriber._next (innerSubscribe.ts:30)
    at SimpleInnerSubscriber.Subscriber.next (Subscriber.ts:99)
    at MapToSubscriber._next (mapTo.ts:70)
    at MapToSubscriber.Subscriber.next (Subscriber.ts:99)

To Reproduce

  1. Here is a StackBlitz of the issue: https://stackblitz.com/edit/ngx-validate-n8j7ib?devtoolsheight=33&file=src/app/components/app.component.ts
  2. Notice the console error after clicking the Remove button

Let me know if you have any suggestions or need any other information.

Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.