1

私は ui-grid で AngularJS に取り組んでいます。行を編集するときのグリッドで、このようなモーダルウィンドウを開いています

$scope.editRow = function(row){     
    var modalInstance = $modal.open({
        templateUrl : contextPath+ '/row/edit',
        controller : 'EditController',
        size : 'lg',
        scope: $scope,
        resolve : {
            result : function() {
                return row;
            }
        }
    }); 
    modalInstance.result.then(function() {
    .......
    });
}

Editcontrollerのデフォルト関数を呼び出した後、モデルウィンドウが開き、行の詳細が表示されます。この時点までは正常に動作しています。今、AngularUI を使用して開いているモーダル ウィンドウで検証を実行しようとしていますが、検証が機能していません。以下は、検証が機能していない私の UI ページです。

<div class="modal-content">
<div class="modal-header">      
    <h4 class="modal-title"></h4>
    <h3 align="center">Edit Row Details</h3>
</div>

<div class="modal-body">
    <form class="form-horizontal" name="myform" ng-submit="submitForm(myform.$valid)" novalidate>
            <!-- Content Start -->
            <div class="container">
                <div class="row">
                        <div class="form-group required"
                            ng-class="{ 'has-error' : myform.name.$invalid && !myform.name.$pristine }">
                            <label for="name" class="control-label"> Name
                            </label>
                            <div>
                                <input type="text" name="myform.name" class="form-control input-sm"
                                    ng-model="myform.name" placeholder="Name"
                                     required />
                                     <p ng-show="myform.name.$invalid && !myform.name.$pristine" class="help-block"> Name is required.</p>

                            </div>
                        </div>
                </div>
                <div class="row">
                        <div class="form-group">
                            <div>
                                <button type="submit" ng-model="myform.save"  ng-disabled="myform.$invalid"
                                    class="btn btn-primary" ng-click="edit(myform)">EDIT</button>
                            </div>
                        </div>
                </div>
            </div>
                <!-- Content End -->
    </form>
</div>

誰かが検証を行う方法を教えてください。もう1つ、モーダルウィンドウを正常に開いた場合、検証は機能していますが、行を編集すると問題が発生します。これはスコープの問題であり、子スコープがバインドされていないと思います。あなたの助けは非常に価値があります。

4

2 に答える 2

0

最後に、私は解決策を見つけることができます

EditController でコードの下に追加

$scope.form={};

あなたのフォームには、このような form.myform が必要です

<div class="modal-content">
<div class="modal-header">
    <h4 class="modal-title"></h4>
    <h3 align="center">Edit Row Details</h3>
</div>

<div class="modal-body">
    <form class="form-horizontal" name="form.myform"
        ng-submit="submitForm(form.myform.$valid)" novalidate>
        <!-- Content Start -->
    <div class="container">
        <div class="row">
        <div class="form-group required"
            ng-class="{ 'has-error' : form.myform.name.$invalid && !form.myform.name.$pristine }">
            <label for="name" class="control-label"> Name </label>
            <div>
                <input type="text" name="myform.name"
                    class="form-control input-sm" ng-model="myform.name"
                    placeholder="Name" required />
                <p  ng-show="form.myform.name.$invalid && !form.myform.name.$pristine"
                    class="help-block">Name is required.</p>

            </div>
            </div>
        </div>
    <div class="row">
        <div class="form-group">
            <div>
            <button type="submit" ng-model="myform.save" ng-disabled="form.myform.$invalid" class="btn btn-primary"
                    ng-click="edit(myform)">EDIT</button>
            </div>
        </div>
    </div>
</div>
    <!-- Content End -->
</form>
</div>

誰かの役に立つかもしれないので、私はこれを投稿しています..

于 2016-04-11T11:28:20.653 に答える
0

入力の名前にフォーム名を含める必要はありません。フォーム内にあるため、入力はすでにそのフォームにバインドされています。また、フォーム自体ではなく、ng-model をスコープ上の別のオブジェクト (以下ではモデルを使用しました) にバインドすることをお勧めします。

このように書きます。

<div class="row">
   <div class="form-group required"
        ng-class="{ 'has-error' : myform.name.$invalid && !myform.name.$pristine }">
         <label for="name" class="control-label"> Name </label>
         <div>
              <input type="text" name="name" class="form-control input-sm"
                                ng-model="model.name" placeholder="Name"
                                 required />
               <p ng-show="myform.name.$invalid && !myform.name.$pristine" class="help-block"> Name is required.</p>

                      </div>
                    </div>
            </div>

また、ng-submitを次のように変更します

<form class="form-horizontal" name="myform" ng-submit="myform.$valid && submitForm()" novalidate>

于 2016-03-21T14:06:31.377 に答える