sabrio / ng2-validation-manager Goto Github PK

I tried to set a validation for phone number what i did is
'phone_number': 'required|minLength:10|maxLength:10|number ',
but it does not validate min and max it just accepts any length..

I am trying to set array values to a field, but its always passed as a string instead of an array.

    this.form.setValue({
      'request_types': ['hotel', 'flights']
    });

Hi, i get multiple errors using forms directives from angular material. It seems not compatible, did you test with it ?

Thank you

I am trying to get a custom URL pattern to work:
'url' : 'required|pattern: [^((http|ftp|https):\\/\\/)?([\\w_-]+(?:(?:\\.[\\w_-]+)+))([\\w.,@?^=%&:\\/~+#-]*[\\w@?^=%&\\/~+#-])?$]',

BUT I keep getting this "invalid expression" error. Will this pattern not work with your validation manager?

You left a console.log in lib/validation-manager.ts l.164

Hi,

when I call isValid() in my template
<button [disabled]="!vm.isValid()" class="btn btn-primary btn-block">Submit</button>

the validation is triggered on the fields and the errors displayed (with 'require' validators for example) before the user enters anything.
As a workaround I use
<button [disabled]="vm.formGroup.invalid" ...

Thanks for this library!

How can i call or include custom validation rule in to validation manager ?

Hello, I found your library while trying to find something easier to implement than the official Reactive Form. Your library seems to make this bridge possible (I find the core one immensely complex for no reason).

However, I need to support at least 2 languages (French/English which I'm both fluent with, so I could help with French translation). Would you have an easier way to deal with that in the near future? I would probably use ngx-translate in my projects since it supports dynamic translation (that is without reloading the page) and loading of translations through JSON files, is that an option for you?

Side note.
Your lib looks very similar to the one I made in AngularJS 1.x since I also wrote it based on the excellent Laravel implementation as you did. If you want to take a look at it, it was named Angular-Validation and it supported a lot of ways to do validation (local, remote, multiple languages, ...). I'm talking in past time since I'm not intending to rewrite it for Angular2+, though it might give you ideas for future functionalities like multiple language support (I used Angular-Translations with external JSON files, the community helped me to bring it up to 11 locales, which you can see here). You could also peek around the Wiki, it's loaded.

How to do Ajax validation
For example, validation that a username exists

i have used ng2 validation manager. I want to validate image.

My html file like below

    <input type="file" (change)="fileChangeEvent($event)" class="form-control" formControlName="filesToUpload">

and my ts file as below

filesToUpload: Array = [];
this.form1 = new ValidationManager({
'filesToUpload' : 'required',
});
fileChangeEvent(fileInput: any) {
this.filesToUpload = <Array>fileInput.target.files;
}

save1(){
console.log(this.form1.getData());
if(this.form1.isValid()){
alert('validation pass');
console.log(this.form1.getData());
this.form1.reset();
// this.myModal.close();
//this.myModal.close()
}else{
alert('validation failed');
}
}

When i submit my button i get only 'validation failed' in alert message.how can i validate image also i want to validate whether the selected file is image or not?

Hello,

Your package is very helpful but I have an issue when I am creating my own rule with my own pattern. I follow the instructions faithfully and this message comes out of me

Error: Validation message is missing for: pattern

Before I use pattern validator everything works like a charm! :/

The Component Code :

ngOnInit() {
        //Form Validation Rules
        this.form = new ValidationManager({
            'name': 'required|pattern:[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*',
            'username': 'required|minLength:4|maxLength:40',
            'email': 'required|email',
            'password': 'required|rangeLength:6,50',
            'repassword': 'required|equalTo:password'
        });

        this.form.setErrorMessage('name', 'pattern', 'Pattern must be part of this family: [A-Za-z0-9.-_]');
    }

The HTML Code :

<h2 class="page-header">Register</h2>
<form #registerForm="ngForm" [formGroup]="form.getForm()" (ngSubmit)="onRegisterSubmit()">
    <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" formControlName="name" required="required">
        <div *ngIf="form.hasError('name')" class="alert alert-danger">
            {{form.getError('name')}}
        </div>
    </div>

    <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control" formControlName="username" required="required">
        <div *ngIf="form.hasError('username')" class="alert alert-danger">
            {{form.getError('username')}}
        </div>
    </div>

    <div class="form-group">
        <label>Email</label>
        <input type="text" class="form-control" formControlName="email" required="required">
        <div *ngIf="form.hasError('email')" class="alert alert-danger">
            {{form.getError('email')}}
        </div>
    </div>

    <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control" formControlName="password" required="required">
        <div *ngIf="form.hasError('password')" class="alert alert-danger">
            {{form.getError('password')}}
        </div>
    </div>

    <div class="form-group">
        <label>RE-Password</label>
        <input type="password" class="form-control" formControlName="repassword" required="required">
        <div *ngIf="form.hasError('repassword')" class="alert alert-danger">
            {{form.getError('repassword')}}
        </div>
    </div>

    <button type="submit" class="btn btn-primary" [disabled]="!registerForm.form.valid">Submit</button>
    <button type="reset" class="btn btn-default">Reset</button>

</form>