На прошлом уроке мы узнали, как создавать наши первые угловые реактивные формы.
Angular Reactive Form 01: Создание вашей первой формы
Добавление проверки в реактивной форме похоже на то, что мы показываем сообщение об ошибке в соответствии с поведением пользователя форм. Например, кто знает, может быть, какой-нибудь ребенок откроет наш телефон или ноутбук и попытается отправить форму. Возможности есть, кроме шуток. Давайте посмотрим, как работать над добавлением проверки в наши реактивные формы.
Я сосредоточусь в основном на файлах component.html и component.ts, если вы еще не закончили последний блог. Я настоятельно рекомендую проверить последний блог.
Если вы завершили или хотите знать быстро. Продолжить чтение.
В нашем файле app.component.ts импортируйте класс Validators из ‘@angular/forms’.
После того, как мы импортировали наши валидаторы, следующим шагом будет включение наших валидаторов в имя пользователя и контроллер электронной почты. Мы можем объявить его в виде массива, если нам нужно несколько валидаторов.
Здесь я добавил требуемый и адрес электронной почты для управления формой электронной почты.
this.signupForm = new FormGroup({ username: new FormControl(null, Validators.required), email: new FormControl(null, [Validators.required, Validators.email]), });
Это все в файле Ts,
Таким образом, в app.component.html отображается сообщение об ошибке пользователя в пользовательском интерфейсе.
Все, что нам нужно сделать, это включить переменную формы регистрации и получить доступ к типу сообщения, которое нам нужно показать. .
Как и в нашем случае, требуется показать имя пользователя. Мы берем имя пользователя formControl и получаем доступ к касанию (если пользователь коснулся входного значения, мы показываем ошибку).
<span *ngIf="!signupForm.get('username').valid && signupForm.get('username').touched"> Please enter username </span>
Как и мудро, я добавил раздел ввода электронной почты.
Код Stackblitz (найти работающий код)
https://stackblitz.com/edit/angular-reactive-basic-validation