How to add validation to @Input in angular?

Question

How can you add validation to @Input in angular so that angular throws an error when you provide an @Input that is not in the options you provided. I tried using enums, but enums can not validate variables from the template.

My current working implementation is using if statements. For example:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.scss']
})
export class DropdownComponent implements OnInit {

  @Input() option;
  validOptions = ['option1','option2','option3','option4','option5'];

  constructor() { }

  ngOnInit() {
    this.validateOptionInput()
  }

  validateOptionInput(){
    this.validOptions.forEach(myFunction);

    function myFunction(value) {
      if((this.validOptions != value){
        throw({error: `${value} is not a valid input variable. The valid options are: ${this.validOptions}`})
      } else {
        return;
      }
    }
  }

}

Is there a way to do the same using enums or a way built in, in angular?

You should not validate only in OnInit hook, option is an Input, therefore, its value can be later — HTN
– HTN, Commented May 17, 2020 at 12:56
Do you mean like this?? stackblitz.com/edit/my-angular-starter-woejls — Maniraj Murugan
– Maniraj Murugan, Commented May 17, 2020 at 13:04
Also there are some modifications needs to be done in this line, if((this.validOptions =! value) .. which needs to be like if(this.validOptions != value) — Maniraj Murugan
– Maniraj Murugan, Commented May 17, 2020 at 13:05
@ManirajMurugan yes like that. My code works, I was looking for an alternative that uses less code and maybe inbuilt in angular. — YulePale
– YulePale, Commented May 17, 2020 at 13:58
@htn Your comment is really useful. I think it should be part of your answer. — YulePale
– YulePale, Commented May 17, 2020 at 14:00

HTN · Accepted Answer · 2020-05-17 12:54:04Z

2

Enum is only a set of constants. If you want to add validation ==> it have to be done in runtime, such as:

const validOptions = ['option1','option2','option3','option4','option5'];
export class DropdownComponent {
  @Input() set option(v: any) {
     if (validOptions.includes(v)) {
        this._option = v;
     } else {
        // handle error
     }
  }
  get option(): any {
     return option;
  }
  private _option: any;
}

You may as well use some validation library, but it's still heavy. I would prefer working with types and using angular compilation strictTemplates option often to detect wrong type assignment.

answered May 17, 2020 at 12:54

HTN

3,6121 gold badge10 silver badges18 bronze badges

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

Comments

Șold Andrei-Alexandru · Accepted Answer · 2020-05-17 12:53:28Z

2

As far as I know Angular can only help with with making that Input mandatory using the annotation @isRequired.

As about the verification of the input value I think it is okay to manually check it but I strongly recommend to use it in the ngOnChanges Angular Life Hook. That method is triggered everytime one of your @Input values are changing and you would want to make that check everytime that happens.

answered May 17, 2020 at 12:53

Șold Andrei-Alexandru

1565 bronze badges

1 Comment

Shabbir Dhangot Over a year ago

Slightly disagree with ngOnChanges Life Hook. What about adding Form Validation. angular.io/guide/form-validation

Collectives™ on Stack Overflow

How to add validation to @Input in angular?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related