Angular2 form validation on certain conditions

Question

I have setup a form with form builder and i would like to setup custom validation based on a value change

So this is my form

 constructor(){

 this.newtruck  = this._formbuilder.group(
  {
    'trucktype':[''],
    'transporter':[''],
    'dropdown_transporter':[''],
    'truck_number':[''],
    'dropdown_truck_number':[''],
    'driver_name':[''],
    'dropdown_driver_name':[''],
    'driver_number':[''],
    'material':[''],
  }
 )

}

On a dropdown change a value is passed to this function

updateSelectedValue(item) {

if(item){
  if(item.dropdown == 1) {
    this.newtruck.setControl("dropdown_transporter", new FormControl('', Validators.required));
    this.newtruck.setControl("dropdown_transporter", new FormControl('', Validators.required));
    this.newtruck.setControl("dropdown_driver_name", new FormControl('', Validators.required));

  } else  if(item.dropdown == 0){
     this.newtruck.reset();

    this.newtruck.setControl("transporter", new FormControl('', Validators.required));
    this.newtruck.setControl("truck_number", new FormControl('', Validators.required));
   this.newtruck.setControl("driver_name", new FormControl('', Validators.required));
    this.newtruck.setControl("driver_number", new FormControl('', Validators.required));
}
}

}

Now on the form i have a button that i set enbled or disabled by

<button ion-button icon-rig color="danger" [disabled]="!newtruck.valid" (click)="onCreate()" > Save
      <ion-icon name="send"></ion-icon>

    </button>

The above button is always disabled even form is instantiated what could be wrong as you can see at first no validators are called

Günter Zöchbauer · Accepted Answer · 2017-02-01 11:05:34Z

1

You can build the condition into the validator by wrapping the validator by your custom validator function.

this.newtruck.setControl("dropdown_transporter", 
  new FormControl('', 
    (control:Control) => { 
      if(item && item.dropdown == 1) {
      return Validators.required(control)
      }
    )
  );

You can also move out the whole function like

updateSelectedValue(item) 

  var requiredValidator = (control:Control) => { 
    if(item && item.dropdown == 1) {
      return Validators.required(control)));
    }
  };

  this.newtruck.setControl("dropdown_transporter", 
    new FormControl('', requiredValidator));
  ...
}

edited Feb 1, 2017 at 11:05

answered Feb 1, 2017 at 10:04

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

4 Comments

Geoff Over a year ago

requirecValidator = retuns a syntax error when used inside the updateSelectedValue which is a method inside a class

Günter Zöchbauer Over a year ago

I forgot a few characters. Please post the exact error message if it still doesn't work.

Geoff Over a year ago

Ive seen where the error is its at returnValidators.required there are many closing brackets but your syntax works

Geoff Over a year ago

Could you also help me in this one stackoverflow.com/questions/41982662/…

Collectives™ on Stack Overflow

Angular2 form validation on certain conditions

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related