如何验证输入字段以接受 Angular 6 中数组中的值答案

【问题标题】：How to validate input field to accept the values that are in the array in Angular 6如何验证输入字段以接受 Angular 6 中数组中的值
【发布时间】：2020-12-10 06:28:07
【问题描述】：

我有一个场景，输入字段中的应该接受数组中存在的值。如果添加其他值，它应该会抛出错误。

.component.html

<input type="text" ([ngModel])="InputValues" (blur)="validate()">

.component.ts

arrayList =  ['table_1', 'table_2', 'table_3', 'table_4'];

arrayList 有 4 个元素，如果输入任何其他值会引发错误，则输入字段应仅接受此值。输入应接受存在于 arrayList 中的值。

【问题讨论】：

标签： javascript jquery angular regex

【解决方案1】：

您可以通过从 angular cli = (npm install lodash) 安装来使用 lodash 库

validate() {
    let dataPresentOrNot = lodash.includes(this.arrayList,this.InputValues);
    if (dataPresentOrNot) {
       console.log("Entered Value is in Array List"); // success message
    } else {
       console.log("Entered Value is not in Array List"); // Or any error message 
       document. getElementById('you need to pass id of input element here'). value = '' // you can clear out the text box entered value
    }
  }

您可以使用 toastr 通知传递消息以获得良好的 ui 可见性，也可以使用 Angular Validators 方法执行验证。

【讨论】：

【解决方案2】：

validate() {
  this.displayMessage = '';
  const arrayList = ['table_1', 'table_2', 'table_3', 'table_4'];
  if (arrayList.indexOf(this.InputValues) > 0) {
    this.displayMessage = "Entered Value is in the Array List";
  } else {
    this.displayMessage = "Entered Value is not in the Array List";
  }
}

<input type="text" ([ngModel])="InputValues" (blur)="validate()">
<span *ngIf='displayMessage'></span>

注意：- 您可以使用核心 javascript 检查该数组是否包含值。 indexOf(), includes() 方法。

【讨论】：

【解决方案3】：

我们可以为响应式表单添加自定义验证器

在 HTML 中

<form [formGroup]="tableForm">
    <div class='form-group'>
        Table values<input id="tableValue" class='form-control' type="text" formControlName="tableValue" required><br>
    </div>
    <span style="color:red" *ngIf="tableForm.get('tableValue').errors?.inputValidator">Enter a valid value</span><br>
</form>

在ts中

  title = "TableValues";
  tableForm: FormGroup;


  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    // Basic FormControl
    this.tableForm = new FormGroup({
      tableValue: new FormControl(),
    });

    // FormBuilder example
    this.tableForm = this.fb.group({
      tableValue: [null, this.inputValidator(['x', 'y', 'z'])],
    });
  }


  inputValidator(val) {
    return (control: AbstractControl): { [key: string]: boolean } | null => {
      if (
        control.value !== null && !val.includes(control.value)
      ) {
        return { inputValidator: true };
      }
      return null;
    };
  }

【讨论】：