如何通过模板驱动表单验证 angular 7 中的下拉菜单

Question

已尝试验证下拉 select 框但无效。可能是 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;
}

Answer 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 中的下拉菜单

How to validate dropdown in angular 7 by template driven form

css

validation

typescript

angular8