|
Angularjs sintaksisi. Formalar bilan ishlash
|
| bet | 2/6 | | Sana | 26.01.2023 | | Hajmi | 28.97 Kb. | | #39630 |
Bog'liq AngularJS sintaksisi 123123123 rasskraska, 1-Ma`ruza, qidiruv algoritmlari, 631-19 guruh Toshboyev Jaloliddin KT 5-lab, 6-Maruza.Taqdimotlarni yaratish texnologiyalari, Labaratoriya ishi 3 Mobil ilovalarini ishlab chiqish Orifjanov Shavkatbek, Smart city, amaliyot 10, Laboratoriya ishi 11-12, ehtimollar test belgilangan, ЗАДАНИЕ 3 , 9-ma\'ruza 2021-2022 IRT, xisob ishchi dastur 2019-2020, (KOICA) Application Guideline 2022, KOMPYUTER NAZORATI PRINTSIPLARI}
....
Валидация формы
Простая валидация с отключением кнопки и присвоением стилей невалидным инпутам
1. Добавляем условия валидации к инпутам, такие как required и email, делаем кнопку неактивной, когда эти условия false, а также выводим span с предупреждением, когда емейл невалидный:
<form (ngSubmit)="onSubmit()" #testForm="ngForm">
<input type="text" ngModel name="username" required>
<input type="text" ngModel name="email" email="ng-modal" required span>
<span *ngIf="email.invalid && email.touched">Enter valid email!</div>
<button [disabled]="!testForm.valid" type="submit">Test Submit</button>
</form>
Условия, которые вешаются на кнопку либо блок, всплывающие при невалидности, можно комбинировать операторами
&&
или
||
, как видно в примере с блоком выше.
2. Присваиваем стили к компонентам, которые не прошли валидацю и уже были touched (это можно благодаря тому, что инпутам Агуляр добавляет определенные стили, зависимо от происходящих с ними действиий):
input.ng-invalid.ng-touched {
border: 3px solid red;
}
Formaning toʻgʻriligi
Tugmani oʻchirish va uslublarni xato kiritish
1. Kirishlarga kerakli va elektron pochta kabi tekshirish shartlarini qo'shing, ushbu shartlar noto'g'ri bo'lganda tugmani o'chirib qo'ying, shuningdek elektron pochta haqiqiy emas bo'lganda ogohlantirish bilan spanni ko'rsating:
<form (ngSubmit)="onSubmit()" #testForm="ngForm">
<input type="text" ngModel name="username" talab etiladi>
<input type="text" ngModel name="email" email ="ng-modal" talab qilinadigan span>
<span *ngIf="email.invalid && email.touched">Enter valid email! </div>
|
| |
