Question

我是棱角分明的新人，所以请耐心等待。我的表单中包含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个跨度以显示验证状态。当两者都为空时，表单显示invalid这是有道理的。

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

Answer 1

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

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

因此它在技术上具有＆＃34;＆＃34;的值，这满足了要求。

Answer 2

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

Answer 3

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

Angular not validating form select

3 个答案: