Шаблонные проверки углов.

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();}
 }
}

Исходный код демонстрации можно найти по следующей ссылке. пожалуйста, не стесняйтесь оставлять любые комментарии или вопросы, которые у вас есть.

Если вам понравилась статья и вы нашли ее полезной, не забудьте нажать кнопку хлопка.

использованная литература