时间戳

首页 > 解决方案 > 如何以角度向@Input添加验证？

angular - 如何以角度向@Input添加验证？

问题描述

如何在 Angular 中添加验证，以便在您提供不在您提供的选项中的选项@Input时，Angular 会引发错误。@Input我尝试使用枚举，但枚举无法验证模板中的变量。

我当前的工作实现是使用 if 语句。例如：

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;
      }
    }
  }

}

有没有办法使用枚举或内置的方式来做同样的事情？

标签： angulartypescriptvalidation

解决方案

枚举只是一组常量。如果要添加验证 ==> 必须在运行时完成，例如：

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;
}

您也可以使用一些验证库，但它仍然很重。我更喜欢使用类型并strictTemplates经常使用角度编译选项来检测错误的类型分配。

推荐阅读