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

Question

我有一个场景，其中输入字段中的 应该接受数组中存在的值。如果添加其他值，它应该抛出错误。.component.html<input type="text" ([ngModel])="InputValues" (blur)="validate()">.component.tsarrayList =  ['table_1', 'table_2', 'table_3', 'table_4'];arrayList 有 4 个元素，输入字段应仅接受此值，如果输入任何其他值，则应抛出错误。输入应该接受 arrayList 中存在的值。

Answer 1

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()方法。

Answer 2

您可以通过从 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 方法来执行验证。

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

    };

  }