#html #angular #textbox #office-ui-fabric
#HTML #angular #текстовое поле #office-ui-fabric
Вопрос:
Я пытаюсь добавить требуемое поле в тип ввода, даже пытался использовать обязательный атрибут во входном теге, но задание не выполнено.
Я пытался использовать обязательный атрибут во входном теге, но он все еще не работает.
<input name="otp" (keypress)="onOTPChange($event)" [(ngModel)]='otp'
class="ms-TextField-field form-control Login_inputWidth form-control Details_inputWidth"
required type="text" value="" id="otp" placeholder="Enter your OTP">
</div>
Я ожидал, что требуемый атрибут будет работать, но в результате он не работает.
Комментарии:
1. вы можете попробовать с добавлением
#otp="ngModel"
, а затем проверить2. angular.io/guide/form-validation#template-driven-validation
Ответ №1:
Вот простой пример. Пожалуйста, обратите внимание на стиль недопустимой границы. Классы были установлены angular.
Для получения дополнительной информации проверьте: https://angular.io/guide/form-validation#template-driven-validation
<style>
.ng-dirty.ng-touched.ng-invalid {
border: solid 1px red;
}
</style>
<input name="fieldotp"
[(ngModel)]='otp'
class="ms-TextField-field form-control Login_inputWidth form-control Details_inputWidth"
required
#fieldotp="ngModel"
type="text"
placeholder="Enter your OTP">
<div *ngIf="fieldotp.invalid amp;amp; (fieldotp.dirty || fieldotp.touched)"
class="alert alert-danger">
<div *ngIf="fieldotp.errors.required">
OTP required.
</div>
</div>