时间戳

首页 > 解决方案 > 默认值设置为“0”时的角度下拉验证

html - 默认值设置为“0”时的角度下拉验证

问题描述

我已将“选择”的默认值设置为下拉菜单的“0”。

验证规则

1.根据需要选择下拉菜单。（至少从下拉菜单中选择一个选项）。

2.如果未选择某个值，则显示错误消息“您需要选择一个选项”

我尝试过的事情：

情况1：

HTML：

<div class="col-12 col-md-6 col-lg-4">
            <div class="form-group">
              <span class="plain-select">
                <select class="form-control" id="select101" formControlName="UserId"
                  [(ngModel)]="editFormData.userId">
                  *****<option value='0' selected>Select</option>*****
                  <option *ngFor="let user of usernames" value={{user.userId}}>
                    {{user.usernames}}
                  </option>
                </select>
              </span>
              <div
                *ngIf="addUserForm.controls['UserId'].invalid && (submited || ` addUserForm.controls['UserId'].dirty || addUserForm.controls['UserId'].touched)"`
                class="error-msg">
                <div *ngIf="addUserForm.controls['UserId'].errors.required">
                  UserId is required.
                </div>
              </div>
            </div>
          </div>
      
      
      TypeScript:
      
        UserId:  ['', [Validators.required, Validators.min(1)]],

**在上述情况下：

        I am able to see the default as "Select" but the validation doesn't work.

当没有从下拉列表中选择任何选项时，它不会给出任何验证错误。

案例2：

 <div class="col-12 col-md-6 col-lg-4">
            <div class="form-group">
              <span class="plain-select">
                <select class="form-control" id="select101" formControlName="UserId"
                  [(ngModel)]="editFormData.UserId">
                  <option value='null' selected>Select</option>
                  <option *ngFor="let user of usernames" value={{user.userId}}>
                    {{user.usernames}}
                  </option>
                </select>
              </span>
              <div
                *ngIf="addUserForm.controls['UserId'].invalid && (submited || addUserForm.controls['UserId'].dirty || addUserForm.controls['UserId'].touched)"
                class="error-msg">
                <div *ngIf="addUserForm.controls['UserId'].errors.required">
                  UserId is required.
                </div>
              </div>
            </div>
          </div>
          
      
        TypeScript:
      
      

  UserId:  ['', [Validators.required, Validators.min(1)]],
        
        In the above case, the validation is working as expected but however the default value is not set to "Select" and also the validation works only if "Select" option is selected from the dropdown
        
        Case-3:
        
        Same happens when i select the value to "undefined".

标签： htmlangularvalidationdropdownangular-ng-if

解决方案

使其工作的一种可能方法是ngValue用于数据绑定

  <option [ngValue]="null" selected>Select</option>
  <option *ngFor="let user of usernames" [ngValue]="user.userId">
    {{user.username}} - {{user.userId}}
  </option>

要显示验证错误（注意?. 可选的链接）：

  <div *ngIf="frm.controls['UserId'].dirty && frm.controls['UserId']?.errors?.required">
    UserId is required.
  </div>

演示

推荐阅读