Проверка ввода с рисунком AngularJS 2

Question

В настоящее время я пишу простую форму в iOnic2 (AngularJS 2). Мне было интересно, как я хотел бы добавить простой regular expression шаблон для проверки:

Я в основном имею это:

<form> 
    <ion-input stacked-label> 
     <ion-label>{{label.msisdn}}</ion-label> 
     <input type="text" 
       [(ngModel)]="msisdn" 
       ngControl="msisdnForm" 
       required 
       maxlength="10" 
       minlength="10" 
       pattern="06([0-9]{8})" 
       #msisdnForm="ngForm" 
     > 
    </ion-input> 
    <button [disabled]="!msisdnForm.valid" block (click)="requestActivationCode()"> 
     {{label.requestActivationCode}} 
    </button> 
</form> 

MaxLength, MinLength & требуется которые подхватили (кнопка отключена, если условия не встретил). Теперь я хочу ограничить ввод числовым и префикс его с помощью 06 (номер голландского телефона с минимальным количеством номеров).

Образец, однако, не подбирается при проверке. Могу ли я сделать это так, или мне нужен кодовый подход?

Answer 1

Добавить шаблон в переменной

var pattern=/06([0-9]{8})/; 

и привязать к нему атрибут

<input type="text" 
       [(ngModel)]="msisdn" 
       ngControl="msisdnForm" 
       required 
       maxlength="10" 
       minlength="10" 
       [pattern]="pattern" 
       #msisdnForm="ngForm" 
     > 

Кажется, это PR https://github.com/angular/angular/pull/6623/files должен первым приземлиться.

Есть еще открытый вопрос https://github.com/angular/angular/issues/7595 Это предотвращает связь pattern. Шаблон должен быть статически добавлен в DOM (без привязки) к работе.

Answer 2

я поставил более подробную информацию (AngularJS 2.0.8 - 3 марта 2016): 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'> 

UPDATE сентябрь 2017

Я просто хочу сказать, что в настоящее время, когда у меня больше опыта, я Usally использовать следующий «дешевый» подход к проверке данных:

Validation ТОЛЬКО на стороне сервера (не угловая вообще!), И если что-то не так, то сервер (RESTful API) возвращает некоторый код ошибки, например, HTTP 400 и следующий объект JSON в теле ответа (который в угловом я ставлю err переменные):

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

(если ошибка возврата сервера проверки в другом формате, то вы можете обычно легко сопоставлять его с вышеуказанной структурой)

В шаблоне HTML я использовать отдельный тег (Div/SPAN/маленький и т.д.)

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

Как вы видите, когда есть какая-то ошибка в «емкости», то помечать с переводом ошибок (на языке пользователя) будет видимый.Такой подход имеет следующие преимущества:

• очень просто
• в угловой мы не двойной код подтверждения, который является (и должно быть) в сервере (в случае проверки регулярных выражений, это может предотвратить или осложнить ReDoS атаки)
• мы имеем полный контроль над образом ошибка будет показана пользователю (здесь, как egzample в <small> тэгом)
• , потому что в ответе сервера мы возвращаем ERROR_NAME (вместо прямого сообщения об ошибке), мы можем легко изменить сообщение об ошибке (или перевести его), изменив только фронт-угловой код (или файлы с переводами). Поэтому в этом случае нам не нужно касаться кода backend/server.

Конечно, иногда (если это необходимо. - например retypePassword поле, которое никогда не передается на сервер) Я делаю исключение из вышеизложенного подхода и сделать некоторые проверки в угловом (но использовать аналогичный механизм «this.err», чтобы показать ошибки (поэтому я не использую атрибут pattern непосредственно в теге input, но я делаю проверку регулярным выражением в некотором компонентном методе после того, как пользователь поднимет правильное событие, например, изменение ввода или сохранение).