无法验证角度 6 中的 Select 选项答案

【问题标题】：Not able to validate the Select option in angular 6无法验证角度 6 中的 Select 选项
【发布时间】：2019-02-07 10:02:06
【问题描述】：

我正在尝试验证 Angular 6 中的 Select 选项，Aria-required 或 required 似乎没有帮助。

它应该显示一条消息或显示红色边框，如 html 表单所示。

html部分代码

分类
选择类别 {{分类名称}}

        <div class="column">
          <label>&nbsp;&nbsp;Status </label><br />
          <!-- <select class='select-option dropdown-align' [(ngModel)]='statusSelected' (ngModelChange)='onStatusSelected($event)'> -->
            <select class='select-option dropdown-align' [(ngModel)]='statusSelected' (ngModelChange)='onStatusSelected($event)'>

            <option [ngValue]="select">Select status</option>
            <option class='option' *ngFor='let option of options' [value]="option">{{option}}</option>
          </select>
        </div>


onCategorysSelected(event) {
    console.log(event)
    event = parseInt(event)
    this.categorysSelected = event;//option value will be sent as event

  }

【问题讨论】：

代码是一个项目，所以不能发布整个项目代码抱歉...

标签： html angular typescript angular6

【解决方案1】：

将您的 statusSelected 声明为 null，然后将 required 标记放入选择框。试试这个，

   <select required class='select-option dropdown-align' [(ngModel)]='statusSelected' (ngModelChange)='onStatusSelected($event)'>    
    <option [ngValue]="">Select status</option>
    <option class='option' *ngFor='let option of options' [value]="option">{{option}}</option>
  </select>

请注意，如果您输入 [ngValue]="select"，则 'select' 字符串将成为您的值，并且必需的标签将无法正常工作。

【讨论】：

我从 angular2 开始使用这个结构，你能帮我们制作 StackBlitz 吗？

【解决方案2】：

 <div class="column">
              <label>&nbsp;&nbsp;Status<span class="requiredMark">*</span></label><br />
              <select class='select-option dropdown-align' [(ngModel)]='statusSelected' (ngModelChange)='onStatusSelected($event)'>
                <!-- <select  class='select-option dropdown-align' [(ngModel)]='statusSelected'> -->

                <option [ngValue]="select">Select status</option>
                <option  class='option' *ngFor='let option of options' [value]="option">{{option}}</option>
              </select>
              <small class="text-danger" [hidden]=statusvalid>
              <br />&nbsp;&nbsp;&nbsp;&nbsp;Change status
              </small>
            </div>

【讨论】：