尝试验证下拉选择框,但不起作用。可能是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;
}
我在stackblitz中完成了这项工作。模板驱动的表单使用基本的html验证,因此您必须添加所需的属性。我还在[ngClass]
中将!state.valid
更改为state.invalid
。我做的最后一件事是为value属性和所选属性添加一个空字符串来初始化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: ''
};
如果用户取消选择一个状态选项并尝试提交它,这应该立即响应