Как добавить шаблон проверки формы в Angular 2?

У меня есть простая форма, которую необходимо проверить, если начало и конец ввода не пробел.

В HTML5 я сделаю это:

<input type="text" pattern="^(?!\s|.*\s$).*$">

Каково правильное свойство для шаблона проверки в новой директиве Angular 2 ngControl? Официальный бета-API по-прежнему не хватает документации по этому вопросу.

Ответы

Ответ 1

Теперь вам не нужно использовать FormBuilder и все эти сложные угловые вещи. Я поместил больше деталей из этого (Angular 2.0.8 - 3march2016): https://github.com/angular/angular/commit/38cb526

Пример из репо:

<input [ngControl]="fullName" pattern="[a-zA-Z ]*">

Я проверяю это, и это работает :) - вот мой код:

<form (ngSubmit)="onSubmit(room)" #roomForm='ngForm'  >
...
<input 
  id='room-capacity' 
  type="text" 
  class="form-control" 
  [(ngModel)]='room.capacity' 
  ngControl="capacity" 
  required
  pattern="[0-9]+" 
  #capacity='ngForm'>

Альтернативный подход (ОБНОВЛЕНИЕ, июнь 2017 г.)

Проверка выполняется ТОЛЬКО на стороне сервера. Если что-то не так, сервер возвращает код ошибки, например HTTP 400 и следующий объект json в теле ответа (как пример):

this.err = { 
    "capacity" : "too_small"
    "filed_name" : "error_name", 
    "field2_name" : "other_error_name",
    ... 
}

В HTML-шаблоне я использую отдельный тег (div/span/small и т.д.)

<input [(ngModel)]='room.capacity' ...>
<small *ngIf="err.capacity" ...>{{ translate(err.capacity) }}</small>

Если в'acity 'есть ошибка, то будет виден тег с переводом msg. Этот подход имеет следующие преимущества:

  • это очень просто
  • избегать дублирования кода проверки бэкэнда во внешнем интерфейсе (для проверки регулярного выражения это может предотвратить или усложнить ReDoS- атаки)
  • управление отображением ошибки (например, <small>)
  • backend return error_name, который легко перевести на нужный язык в интерфейсе

Конечно, иногда я делаю исключение, если требуется проверка на стороне retypePassword интерфейса (например, поле retypePassword при регистрации никогда не отправляется на сервер).

Ответ 3

Вы можете создать свою форму с помощью FormBuilder, так как это позволит вам более гибко настраивать форму.

export class MyComp {
  form: ControlGroup;

  constructor(@Inject()fb: FormBuilder) {  
    this.form = fb.group({  
      foo: ['', MyValidators.regex(/^(?!\s|.*\s$).*$/)]  
    });  
  }

Затем в вашем шаблоне:

<input type="text" ngControl="foo" />
<div *ngIf="!form.foo.valid">Please correct foo entry !</div>

Вы также можете настроить ng-invalid CSS class.

Поскольку на regex нет валидаторов, вы должны написать свой собственный. Это простая функция, которая принимает управление во вводе и возвращает null, если она действительна, или StringMap, если это недействительно.

export class MyValidators {
  static regex(pattern: string): Function {
    return (control: Control): {[key: string]: any} => {
      return control.value.match(pattern) ? null : {pattern: true};
    };
  }
}

Надеюсь, что это поможет вам.

Ответ 4

пользовательская проверка шаг за шагом

Шаблон HTML

  <form [ngFormModel]="demoForm">
  <input  
  name="NotAllowSpecialCharacters"    
  type="text"                      
  #demo="ngForm"
  [ngFormControl] ="demoForm.controls['spec']"
  >

 <div class='error' *ngIf="demo.control.touched">
   <div *ngIf="demo.control.hasError('required')"> field  is required.</div>
   <div *ngIf="demo.control.hasError('invalidChar')">Special Characters are not Allowed</div>
 </div>
  </form>

Компонент App.ts

import {Control, ControlGroup, FormBuilder, Validators, NgForm, NgClass} from 'angular2/common';
import {CustomValidator} from '../../yourServices/validatorService';

в классе define

 demoForm: ControlGroup;
constructor( @Inject(FormBuilder) private Fb: FormBuilder ) {
    this.demoForm = Fb.group({
       spec: new Control('', Validators.compose([Validators.required,   CustomValidator.specialCharValidator])),
      })
}

в разделе { ../../yourServices/validatorService.ts}

export class CustomValidator {
    static specialCharValidator(control: Control): { [key: string]: any } {
   if (control.value) {
       if (!control.value.match(/[-!$%^&*()_+|~=`{}\[\]:";#@'<>?,.\/]/)) {            
           return null;
       }
       else {            
           return { 'invalidChar': true };
       }
   }

 }

 }

Ответ 5

Мое решение с Angular 4.0.1: просто показ пользовательского интерфейса для ввода CVC - где CVC должен быть ровно 3 цифры:

    <form #paymentCardForm="ngForm">         
...
        <md-input-container align="start">
            <input #cvc2="ngModel" mdInput type="text" id="cvc2" name="cvc2" minlength="3" maxlength="3" placeholder="CVC" [(ngModel)]="paymentCard.cvc2" [disabled]="isBusy" pattern="\d{3}" required />
            <md-hint *ngIf="cvc2.errors && (cvc2.touched || submitted)" class="validation-result">
                <span [hidden]="!cvc2.errors.required && cvc2.dirty">
                    CVC is required.
                </span>
                <span [hidden]="!cvc2.errors.minlength && !cvc2.errors.maxlength && !cvc2.errors.pattern">
                    CVC must be 3 numbers.
                </span>
            </md-hint>
        </md-input-container>
...
<button type="submit" md-raised-button color="primary" (click)="confirm($event, paymentCardForm.value)" [disabled]="isBusy || !paymentCardForm.valid">Confirm</button>
</form>