Create custom validators for dynamic forms angular 2

Question

I just red angular 2 cookbook in how you I can create dynamic forms but I wander how I can add custom validators to particular field.

questions.forEach(question => {
  group[question.key] = question.required ? new FormControl(question.value || '', Validators.required)
                                          : new FormControl(question.value || '');
});

Here they form a from group to hold form inputs so what about if I want to apply a particular validation to a particular question Ex: if I has input for confirming password matching. I know that there is validateequal attribute to do this task how I can apply this validateequal or even create my own custom validation

Note that it is dynamic form which means could hold any input for example i am planning to use the same form to generate log in form which means that it only has password input , i need away to check if there is input will hold password and if any will hold password confirmation and if so then i need to check if they are matching before submit

this should help ya out mate. scotch.io/tutorials/… As far as custom validations go, im in the same boat trying to figure that out. I believe custom directives will be the way to go, but I could be wrong. This one might help you out too, a little dated, but you can get an idea from it. joshmorony.com/advanced-forms-validation-in-ionic-2 — SwankTheTank
– SwankTheTank, Commented Nov 11, 2016 at 21:44
i red all these articles but my problem is i am building form dynamically and i want to verify confirm password input but actually at this moment password control has not built yet. @Swank do you know any way i can set form validation manually — Kero
– Kero, Commented Nov 11, 2016 at 21:51

SwankTheTank · Accepted Answer · 2016-11-11 23:20:16Z

1

alrighty, I think I have it.

You're going to use custom directives in order to get the Job done.

Here is a very rudimentary tutorial on custom directives https://angular.io/docs/ts/latest/guide/attribute-directives.html

if you create that however you're templating your app, you can easily modify it to fit your parameters.

in mine, i've used that example in the following way.

Your NgModule || app.module.ts

import { customDirective } from '../directive/path';

Your customDirective.ts || js

import {Directive, HostListener, Input, ElementRef} from '@angular/core';
@Directive({
   selector: '[fooSelector]'
})

export class CustomDirective {
  constructor(private el: ElementRef, private renderer: Renderer) {}
  @Input('fooSelector') testing: Object;

  //this controls event type with change being the event
  @HostListener('change') onChange(){
    this.logicFunct(this.htmlAttr); //will define htmlAttr in template
  }

  //this is the validator logic
  private logicFunct($obj: Object){
    // submit logic here - for ex:
    if($obj != 'test) {
      this.varBar = true; //check template ngIf
    }
  }
}

Your Template

<input
  type="text"
  #htmlAttr
  [fooSelector]="this.htmlAttr._value"
  *ngIf="!this.varBar">
</input>

I'm almost positive there are other better ways to do this, and if someone has one, please let us know!

Hope this helps anyone stumbling upon it.

answered Nov 11, 2016 at 23:20

SwankTheTank

1,1377 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kero Over a year ago

thanks for you contributing i really appreciate that , but my problem is completely different,

SwankTheTank Over a year ago

well, it is and it isn't. Although this is a bit unorthodox, you can use this approach for your custom validations.

Kero Over a year ago

my actual problem that i need away to grab value from another input if this input field exists, check above my update to question

Collectives™ on Stack Overflow

Create custom validators for dynamic forms angular 2

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related