Как создать пользовательскую ошибку ввода в Angular Material - PullRequest
Новая
       34

Как создать пользовательскую ошибку ввода в Angular Material

0 голосов
/ 18 октября 2018

Я пытаюсь создать свой собственный валидатор для углового ввода материала ... я хочу проверить, что допустимы только буквы, цифры и пробелы ... Я создал пользовательский void, который проверяет это, но я могу 'чтобы это сработало ... Это мой код: 

<md-input-container class="full-width" >
  <input name="nombre" required [(ngModel)]="name" mdInput placeholder="Nombre">
  <md-error *ngIf="checkSpecialCharacters()">Se han ingresado caracteres invalidos</md-error>
</md-input-container>

и TS 

valid = true;
public name: string;
checkSpecialCharacters () {
  this.valid = true;
  if (this.name.length > 0) {
    for (let i = 0; i < this.name.length; i++) {
      if (this.name.charAt(i).match(/^[^a-zA-Z0-9 ]/) !== null) {
        this.valid = false;
      }
    }
  }
  return this.valid;
}

, какой оператор мне следует использовать?или как?Спасибо

(это испанское приложение, поэтому есть некоторые испанские слова)

Ответы [ 2 ]

0 голосов
/ 18 октября 2018

Элемент <mat-error> будет отображаться только в том случае, если состояние элемента управления вводом является ошибочным (см. Этот пост: Угловой материал: ошибка в мате не отображается, несмотря на истинные методы ).Все немного сложнее, когда вы используете ngModel вместо formControl, но принцип тот же, потому что ngModel использует FormControl для внутреннего использования.

При использовании реактивных форм и FormControl проще всего было бы добавитьпользовательский валидатор для FormControl вашего ввода (и вы можете сделать это также с помощью ngModel - но это больше работы, так как вам нужно ссылаться на FormControl через ngModel, который требует использования ViewChild и т. д.).

Самый простой способ сделать этос ngModel и Angular Material просто использовать пользовательский ErrorStateMatcher для MatInput.Это обеспечит автоматическую ссылку на внутренний FormControl.Взгляните на https://material.angular.io/components/input/overview#changing-when-error-messages-are-shown.

Затем вы вызываете функцию checkSpecialCharacters из вашего ErrorStateMatcher, а не из mat-error ngIf: 

import {FormControl, FormGroupDirective, NgForm, Validators} from '@angular/forms';
import {ErrorStateMatcher} from '@angular/material/core';

/** Error when invalid control is dirty, touched, or submitted. */
export class MyErrorStateMatcher implements ErrorStateMatcher {

  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    if (control && control.invalid 
        && (control.touched || (form && form.submitted))) {
      return true;
    } else {
      return !checkSpecialCharacters(control.value);
    }
  }
}

Обновленный компонент: 

errorStateMatcher: ErrorStateMatcher = new MyErrorStateMatcher();

checkSpecialCharacters(value: string): boolean {
  let valid = true;
  if (value && value.length > 0) {
    for (let i = 0; i < this.name.length; i++) {
      if (value.charAt(i).match(/^[^a-zA-Z0-9 ]/) !== null) {
        valid = false;
      }
    }
  }
  return valid;
}

HTML: 

<md-input-container class="full-width" >
  <input name="nombre" required [(ngModel)]="name" mdInput placeholder="Nombre" [errorStateMatcher]="errorStateMatcher">
  <md-error>Se han ingresado caracteres invalidos</md-error>
</md-input-container>

Обратите внимание, что это основано на моих знаниях Angular Material 6 - я верю, что это будет хорошо и для v2.

0 голосов
/ 18 октября 2018

Я второй комментарий @ p4r1.Это входит в сферу работы угловых форм каркаса.Я могу показать вам, как я создавал пользовательскую проверку в моих целях.

Было бы легче справиться, если бы мы использовали форму вместо ngModel.Я предполагаю, что ваша работа не требует шаблонно-управляемых моделей.

в вашем файле TS: 

form = new FormGroup({
  name: new FormControl('', checkSpecialCharacters().bind(this))
});

checkSpecialCharacters(): ValidatorFn {
  return (control: AbstractControl) => {
    if (control.value.length > 0) {
      for (let i = 0; i < control.value.length; i++) {
        if (control.value.charAt(i).match(/^[^a-zA-Z0-9 ]/) !== null) {
          return {'error': {value: control.value}};
        }
      }
     }
    };
  }

и в вашем HTML:

вместо этого, если ngmodel использует formControlName = nameи в вашем * ngIf используйте * ngIf = "name.error", то есть: 

 <md-error *ngIf="name.error">Se han ingresado caracteres invalidos</md-error>

это должно работать.

...