Проверка форм Angular 4 — сбой браузера при экспорте ngModel

У меня есть простой элемент управления вводом, который я хочу проверить с помощью проверки Angular Forms, например.

<form>
<ion-input type="tel" id="phoneNumber" name="phoneNumber" required [(ngModel)]="phoneNumber" maxlength="10" minlength="10"
  placeholder="Touch here to enter a phone number" class="form-control">
</ion-input>
<p *ngIf="!phoneNumber.pristine && phoneNumber.errors.required" style="color:red;">
  * Phone number is required.
</p>
<button ion-button block large full (ngSubmit)="placeOrder()">Place order</button>
</form>

Я пытаюсь следовать документации Angular для форм, управляемых шаблонами: https://angular.io/guide/forms

У меня проблема в том, что как только браузер попадает на страницу, браузер просто зависает, и единственный выход - завершить процесс браузера. Ядро ЦП будет увеличиваться, а объем памяти будет увеличиваться до более чем 1 ГБ в течение минуты. Это приложение Ionic 3 с Angular 4. Я добавил FormsModule в свой файл app.module.ts.

Любые идеи, почему это происходит?

Я обнаружил, что когда я удаляю любое из условий внутри моего * ngIf, проблема не возникает (хотя, очевидно, тогда нет проверки).


angular ionic3 angular4-forms
person Ciaran Gallagher    schedule 03.11.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Ваш ввод связан с использованием ngModel со свойством phoneNumber вашего компонента. Таким образом, все, что вы вводите в этот ввод, становится значением phoneNumber. То, что вы вводите, является строкой. Итак, phoneNumber — это строка.

Строки не имеют свойства pristine или error. Так что phoneNumber.pristine не имеет смысла. Это свойства объекта FormControl, созданного директивой ngModel, который содержит состояние ввода. Чтобы получить доступ к этому объекту FormControl (через директиву ngModel), вам необходимо указать директиву как переменную в вашем шаблоне:

<ion-input type="tel" id="phoneNumber" name="phoneNumber" required 
           [(ngModel)]="phoneNumber" #phoneNumberControl="ngModel" 
           maxlength="10" minlength="10"
           placeholder="Touch here to enter a phone number" class="form-control">
</ion-input>
<p *ngIf="!phoneNumberControl.pristine && phoneNumberControl.errors.required" style="color:red;">
  * Phone number is required.
</p>
person JB Nizet    schedule 03.11.2017
comment
Проверка теперь работает для меня с этим кодом, но я обнаружил, что как только 10 цифр вводятся в элемент управления, браузер зависает и перестает отвечать на запросы, и процесс необходимо убить. - person Ciaran Gallagher; 04.11.2017