Блог

У меня есть сценарий, в котором поля ввода должны принимать значения, которые присутствуют в массиве. При добавлении других значений должно возникнуть ошибка.

.component.html

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

.component.ts

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

ArrayList имеет 4 элемента, поле ввода должно принимать только эти значения, если какие-либо другие введенные значения должны выдавать ошибку. Входные данные должны принимать значения, которые присутствуют в ArrayList.

Вы можете использовать библиотеку Lodash, установив ее из angular cli = (npm install 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 notification для хорошей видимости пользовательского интерфейса или вы также можете использовать метод Angular Validators для выполнения проверки.

 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() .

Мы можем добавить пользовательские средства проверки в реактивные формы

в 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 amp;amp; !val.includes(control.value)
      ) {
        return { inputValidator: true };
      }
      return null;
    };
  }