Angular поставляется с модулями валидации, такими как шаблонная, реактивная и динамическая форма. Сегодня мы рассмотрим валидацию, управляемую шаблоном.
Шаблонные проверки Angular - это простейшая форма из всех проверок, которая используется для проведения проверки формы простейшего вида.
Я проведу вас через простую проверку формы, где пользователь должен будет заполнить данные о сотруднике, прежде чем нажимать кнопку отправки.
Форма будет состоять из имени сотрудника, номера сотрудника и даты начала работы сотрудника.
Все три поля обязательны для заполнения сведений о сотруднике. Если пользователь нажимает кнопку «Сохранить», не вводя обязательные поля, все поля должны светиться и выдавать сообщения об ошибках проверки.
Когда все необходимое будет введено, вы можете сохранить форму.
Зарегистрируйте форму в NgForm
Мы присоединяем имя формы, которое является empolyeeDetailsForm к форме, которая инкапсулирует все три поля внутри себя.
Зарегистрируйте каждый из элементов формы для отслеживания и проверки элемента.
После того, как мы зарегистрируем форму в ngForm, нам нужно зарегистрировать каждое из наших полей с угловой формой, которую мы создали для элемента формы.
Это делается путем указания имени элемента и указания имени с помощью атрибута ngModel, как показано ниже. Также не забудьте добавить обязательный атрибут в каждое из полей.
name="employeeName" #employeeName="ngModel" name="employeeNumber" #employeeNumber="ngModel" name="employeeStartdate" #employeeStartdate="ngModel"
Это регистрирует каждый элемент в угловой форме.
Отслеживание контроля, определение и отображение сообщения проверки.
Теперь нам нужно знать, является ли каждый из наших элементов недействительным и затронутым, чтобы мы могли определить состояние элемента. Его можно отслеживать, используя свойства формы, такие как недействительный или затронутый, и соответственно отображать сообщения проверки. Имейте в виду, что мы не добавили $ к каждому из свойств, как это было в других версиях устаревших angular (angular js).
Мы используем эти свойства, чтобы показать сообщение проверки под именем элемента. Обратите внимание, что у нас есть класс проверки, в котором он имеет красный цвет, чтобы отображать текст красным. Вы можете использовать свой собственный класс, чтобы удовлетворить ваши требования к отображению сообщения проверки.
<span *ngIf="(employeeName.invalid && employeeName.touched)" class="validation"> Employee Name is required </span> <span *ngIf="(employeeNumber.invalid && employeeNumber.touched)" class="validation"> Employee Number is required </span> <span *ngIf="(employeeStartdate.invalid && employeeStartdate.touched)" class="validation"> Employee Start Date is required </span>
Это все?
Но подождите, что происходит, когда пользователь нажимает кнопку «Отправить», не играя и не касаясь полей?
Именно здесь мы используем markAsTouched (), чтобы облегчить форму и сообщить пользователю, что им не избежать такого хитрого трюка.
public submit(employeeDetailsForm) { if (employeeDetailsForm) { this.submitted = true; } else { for (const i in this.employeeDetailsForm.controls) { if (employeeDetailsForm.controls[i]) { employeeDetailsForm.controls[i].markAsTouched();} } }
Исходный код демонстрации можно найти по следующей ссылке. пожалуйста, не стесняйтесь оставлять любые комментарии или вопросы, которые у вас есть.
Если вам понравилась статья и вы нашли ее полезной, не забудьте нажать кнопку хлопка.
использованная литература