Angular Material md-select 验证问题

Angular Material md-select validation issue

我的表单上有几个 md-select 下拉菜单,其中很多都有验证。验证在所有下拉菜单上正常工作,但以下内容除外,如果为空,则不会阻止表单提交:

    <md-input-container class="form-input-container"
                        flex="15">
      <label>NDRA*</label>
      <md-select id="registration-information-ndra"
                 name="ndra"
                 ng-model="vm.registration.code"
                 ng-class="{'validation-error': newForm.ndra.$error.required && newForm.$submitted}"
                 ng-required="vm.validation.ndra">
        <md-option ng-repeat="code in vm.dropdowns.codes"
                   value="{{code}}">
          {{code}}
        </md-option>
      </md-select>
    </md-input-container>

vm.validation.ndra 计算结果为真,所以我知道这不是问题所在。如果我查看 newForm.ndra 与工作 select 选项的值,例如 newForm.submissionDate,我得到以下信息:

newForm.ndra: {"$viewValue":"p","$modelValue":"p","$validators":{},"$asyncValidators":{},"$parsers":[],"$formatters":[],"$viewChangeListeners":[],"$untouched":true,"$touched":false,"$pristine":true,"$dirty":false,"$valid":true,"$invalid":false,"$error":{},"$name":"ndra","$options":null}

注册类型(验证作品):

 <md-input-container class="form-input-container padded-input md-block"
                            flex-gt-sm="">
          <label>Type of Registration*</label>
          <md-select id="registration-information-type"
                     name="registrationType"
                     ng-model="vm.registration.type"
                     ng-class="{'validation-error': newForm.registrationType.$error.required && newForm.$submitted}"
                     ng-required="vm.validation.registrationType">
            <md-option ng-repeat="type in vm.dropdowns.types"
                       value="{{type}}">
              {{type}}
            </md-option>
          </md-select>
        </md-input-container>

{"$validators":{},"$asyncValidators":{},"$parsers":[],"$formatters":[],"$viewChangeListeners":[],"$untouched":true,"$touched":false,"$pristine":true,"$dirty":false,"$valid":false,"$invalid":true,"$error":{"required":true},"$name":"registrationType","$options":null}

我认为您的 vm.validation.ndra 正在返回,而您的 vm.validation.registrationType 正在返回。这样就不需要 select。

如果您查看返回的内容...

NDRA

"$valid":true,"$invalid":false

对比

注册类型

"$valid":false,"$invalid":true

他们完全相反。

您应该检查以确保您在 vm.validation.ndra

中得到的是正确的真理

只需将ng-required中的值改为false,在下面link中查看结果。我觉得vm.validation.ndrareturnsfalsehttp://codepen.io/next1/pen/WwoyWG

想通了。在我的控制器代码深处,控制器正在被实例化,然后 this.registration.code 被设置为 P,因此 ndra 下拉列表的模型已经有了一个值。