Question

我有一个带有必需属性的选择标记，并附加了一个ngModel。当ngModel持续存在时，有三个类代表标签的状态：ng-untouched，ng-pristine和 ng-valid （这是我的问题）

我想要ng-invalid类，而不是ng-valid。当ngModel的值为null（或为空）时，ng-invalid显示，但不显示某些自定义值，如0或0＆lt;我想。

这是我的模板代码：

<label for="company-country">
  <span>Country</span>
</label>
<select id="company-country" name="company-country" required
    [(ngModel)]="currentCompany.location">   
  <option [value]="0" selected>Country</option>  
  <option [value]="1">Canada</option>
   ...
</select>

我将第一个选项（国家/地区）设置为默认值，因此 currentCompany.location 的第一个值为0.我希望忽略ngModel该值应用某种条件，因此ng-invalid类可以显示出来。那可能吗？或者我只是遗漏了一些东西。

Answer 1

如果您希望用户不选择默认值（国家/地区），您可以在第一个选项中使用disabled属性，如下所示

<select id="company-country" name="company-country" required 
        [(ngModel)]="currentCompany.location">   
  <option [value]="0" disabled selected>Country</option>  <!--here is the change-->
  <option [value]="1">Canada</option>    
</select>

通过这种方式，默认选择的一个国家/地区可以在用户触摸选择元素后永远不会被选中。

<强> LIVE DEMO

Answer 2

您需要为ng-invalid添加一个css类

@using (@Html.BeginForm("Search", "Notes", null, FormMethod.Post))
{

    <div class="form-horizontal">

        <div class="col-md-6">

            <div class="form-group">

                <label class="control-label col-md-2">رقم التقرير</label>
                <div class="col-md-10">
                    @Html.DropDownList("ReportID", null, "اختـر", htmlAttributes: new { @class = "form-control" })

                </div>
            </div>

            <div class="form-group">

                <label class="control-label col-md-2">التقرير</label>
                <div class="col-md-10">
                    @Html.DropDownList("ReportName", null, "اختـر", htmlAttributes: new { @class = "form-control" })

                </div>
            </div>


            <div class="form-group">

                <label class="control-label col-md-2">نوع الملاحظة</label>
                <div class="col-md-10">
                    @Html.DropDownList("NoteType", null, "اختـر", htmlAttributes: new { @class = "form-control" })

                </div>
            </div>

        </div>


        <div class="col-md-6">

            <div class="form-group">

                <label class="control-label col-md-2">الإدارة</label>
                <div class="col-md-10">
                    @Html.DropDownList("Department", null, "اختـر", htmlAttributes: new { @class = "form-control" })

                </div>
            </div>

            <div class="form-group">

                <label class="control-label col-md-2">اعتماد المدير</label>
                <div class="col-md-10">
                    @Html.DropDownList("ManagerConfirmationState1", null, "اختـر", htmlAttributes: new { @class = "form-control" })

                </div>
            </div>

            <div class="form-group">

                <label class="control-label col-md-2">درجة المخاطرة</label>
                <div class="col-md-10">
                    @Html.DropDownList("RiskLevel", null, "اختـر", htmlAttributes: new { @class = "form-control" })

                </div>
            </div>



        </div>





        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="بحث" class="btn btn-default" />
            </div>
        </div>


    </div>


}

正如评论中提到的@AngularFrance，你需要一个空值为的选项标签

.ng-invalid:not(form)  {
     border-left: 5px solid #a94442; /* red */
}

因此，每当用户选择＆＃34;选择＆＃34;选项ng-invalid class将自动添加。

Angular 2 - 如何在使用ngModel时将某些条件应用于ng-valid类

2 个答案: