angularjs形式成功'标记而不输入任何数据

时间:2016-12-03 19:13:36

标签: javascript angularjs forms validation

表单提交中的 field1 字段为required。但是,当我打开表单时,我会看到has-success&#39; <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> &#39;在标签之前,好像该字段有效,但尚未在该字段中输入任何内容。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <Button
        android:id="@+id/btn_cancel"
        style="@style/MyApp.Form.Component.Button"
        android:text="@string/action_cancel"/>

    <Button
        android:id="@+id/btn_confirm"
        style="@style/MyApp.Form.Component.Button"
        android:text="@string/action_next"/>
</RelativeLayout>

1 个答案:

答案 0 :(得分: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>

控制器

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

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

});

http://plnkr.co/TKj2sx