角度不验证表单选择

Question

我是 Angular 新手，所以请耐心等待。我有一个带有dropdown、textbox 和button 的表格。在表单生效之前，用户必须从下拉框中选择一个选项并在文本框中输入一个值。

<form name='personDataSourceForm' novalidate ng-submit='personDataSourceForm.$valid && PersonCtrl.SaveDataItem()'>
    <span>Invalid: {{personDataSourceForm.$invalid}}</span><br />
    <span>valid: {{personDataSourceForm.$valid}}</span>
    <div class="input-group">
        <div class="input-group-addon">
            <select class="form-control input-sm" required ng-model='PersonCtrl.sp.person.newItem.dataType' ng-options='opt as opt.text group by opt.dataType for opt in PersonCtrl.DataItemTypes'>
                <option value="" disabled selected>Choose...</option>
            </select>
        </div>
        <input type="text" class="form-control input-sm" ng-model='PersonCtrl.sp.person.newItem.value' required>
        <div class="input-group-btn">
            <button class="btn btn-default btn-sm" ng-class="{ 'btn-success' : PersonCtrl.sp.person.newItem.dataType.dataType && PersonCtrl.sp.person.newItem.value }" type="submit">Save</button>
            <button class="btn btn-link btn-sm" type="button" ng-click="PersonCtrl.StopAddItem()">Cancel</button></div>
    </div>
</form>

我快速添加了 2 个 span 来显示验证状态。当两者都为空时，表单会显示invalid，这是有道理的。

只要我在文本框中输入一个值，即使dropdown 仍未更改，表单也会突然有效。 为什么我的dropdown 没有得到验证？我什至试过这个解决方案AngularJS Dropdown required validation

Answer 1

我最初的想法是您已经选择了该默认值：

<option value="" selected>Choose...</option>

所以它在技术上确实具有“”的值，这满足了要求。

Answer 2

我认为您需要查看PersonCtrl.sp.person.newItem。当dataType 和value 都变为实心时，该表单变为有效。我的猜测是该项目始终具有其dataType 实体且有效，因此当输入新值时，整个表单将变为有效。

Answer 3

为什么您的select 广告input 没有name 属性？ name 属性是表单验证正常工作所必需的。 我认为form 为每个输入组件创建了一个name->validity 的映射，可能是您省略了它，它们（select 和input）都映射到同一个有效性对象。如果是这种情况，那么任何人都变得有效，有效地使另一个人的状态也有效，因此它们都是有效的，表格变得有效。 请为它们添加单独的名称，看看问题是否已解决。我上面的观点是一个强烈的猜测，我没有深入研究 Angular 代码来检查 ng-form 的行为。