如何通过模板驱动形式验证 Angular 7 中的下拉列表
Posted
技术标签:
【中文标题】如何通过模板驱动形式验证 Angular 7 中的下拉列表【英文标题】:How to validate dropdown in angular 7 by template driven form 【发布时间】:2020-11-11 22:14:11 【问题描述】:尝试验证下拉选择框但不工作。可能是css问题?那么如何验证它。如果有人知道,请帮助找到解决方案。
演示:https://stackblitz.com/edit/angular-7-template-driven-form-validation-qxecdm?file=app%2Fapp.component.html
app.component.html:
<div class="form-group col">
<select id="inputState" #state="ngModel" [(ngModel)]="model.state" name="state" [ngClass]="'invalid-textbox' :signUpForm.submitted && !state.valid ">
<option>Select</option>
<option *ngFor="let optionName of formFields" value="optionName">optionName</option>
</select>
</div>
app.component.css:
input[type=text].invalid-textbox,
select.invalid-textbox,
input[type=password].invalid-textbox
border-bottom: 2px solid #ed5558;
【问题讨论】:
【参考方案1】:我在 stackblitz 中得到了这个工作。模板驱动的表单使用基本的 html 验证,因此您必须添加所需的属性。我还在[ngClass]
中将!state.valid
更改为state.invalid
。我做的最后一件事是为 value 属性和 selected 属性添加一个空字符串来初始化 ngModel 状态。
HTML 模板
<div class="form-group col">
<select id="inputState" #state="ngModel" [(ngModel)]="model.state" name="state"
[ngClass]="'invalid-textbox' : signUpForm.submitted && state.invalid " required>
<option value="" selected>Select</option>
<option *ngFor="let optionName of formFields" [value]="optionName">optionName</option>
</select>
</div>
组件
model: any =
state: ''
;
如果用户取消选择状态选项并尝试提交它,这应该立即响应。
【讨论】:
我再次更新了原始答案。第一个答案引入了另一个问题,但已解决。这些更改应该适合您。以上是关于如何通过模板驱动形式验证 Angular 7 中的下拉列表的主要内容,如果未能解决你的问题,请参考以下文章
Angular - 模板驱动的表单 - 控制器中的自定义验证器功能
如何使用模板驱动形式将角度路由与角度材料步进器(https://material.angular.io/components/stepper/overview)结合起来?