javascript - angularjs 形成 'has-success' 标记，无需输入任何数据

Question

字段field1在表单提交中是必填。但是，当我打开表单时，我在标签前看到一个绿色的“has-success”复选标记，就好像该字段有效，但尚未在该字段中输入任何内容。

<div class="form-group"
     ng-class="{'has-error':Form.field1.$dirty && Form.field1.$invalid, 'has-success':Form.field1.$valid}">
    <label class="control-label symbol required">
        My Field
    </label>
    <ui-select multiple tagging tagging-label="true" ng-model="myModel.myfield1" name="field1" theme="bootstrap" title="Choose your answer" required>
        <ui-select-match placeholder="This is to be completed">
            {{$item}}
        </ui-select-match>
        <ui-select-choices repeat="r in mydata.datafield1 | filter: $select.search">
            {{r}}
        </ui-select-choices>
    </ui-select>
    <span class="success text-small" ng-if="Form.field1.$valid">This is correct!</span>
</div>

Answer 1

已编辑 2 我刚刚为您制作了一个 plnkr，因此您可以看到我使用此代码获得的行为:

html

<div ng-controller="foo">

<form name="Form">
    <div class="form-group" ng-class="{'has-error':Form.field1.$dirty && Form.field1.$invalid, 'has-success':Form.field1 && Form.field1.$valid}">
    <!-- You have to check for Form.field1 property when putting the form valid as well-->
    <label class="control-label symbol required">
        My Field
    </label>
    <ui-select multiple tagging tagging-label="true" ng-model="myModel.myfield1" name="field1" theme="bootstrap" title="Choose your answer" required>
        <ui-select-match placeholder="This is to be completed">
            {{$item}}
        </ui-select-match>
        <ui-select-choices repeat="r in mydata.datafield1 | filter: $select.search">
            {{r}}
        </ui-select-choices>
    </ui-select>
    <span class="success text-small" ng-if="Form.field1.$valid">This is correct!</span>
  </div>
</form>

</div>

Controller

angular.module('myapp', ['ui.select', 'ngSanitize'])
  .controller('foo', function($scope) {

  $scope.mydata = {
    datafield1: ['Option1', 'Option2', 'Option3']
  }

});

http://plnkr.co/TKj2sx