1

ネストされたフォームを適切に検証し、送信ボタンがクリックされたときにコントローラーで関数を呼び出そうとしています。送信ボタン以外のすべてのボタンを削除しようとしましたが、機能しません。私が作業を開始できた唯一のことは、ボタンをNgクリックすることですが、検証が必要であり、このメソッドでは検証を開始できませんでした。

これは、コントローラーとHTMLのメソッドで、ng-clickを介して呼び出された場合に機能します

 saveRow(row: ControlDetailDTO) {
            row.FiscalYearValues.forEach(value => {
                value.ActualValue = value.PreviousYear + value.DeltaValue;
            });
            
            this.controlsDataContext.saveDetail(row).then((results) => {

                console.log(results);
                row.editMode = false;

            }).catch((err) => {
                    this.$scope.error = err.data.ExceptionMessage;
                });
        }
<table class="table table-striped table-responsive">

                <tr ng-repeat-start="control in newControl.ControlDetails" class="headerLightBlue" ng-show="$first" ng-form="edit">
                    <th colspan="2">Category</th>
                    <th>Description</th>
                    <th>{{control.FiscalYearValues[0].FiscalYear.FiscalYearName }}</th>
                    <th>{{control.FiscalYearValues[1].FiscalYear.FiscalYearName }}</th>
                    <th>{{control.FiscalYearValues[2].FiscalYear.FiscalYearName }}</th>
                    <th>{{control.FiscalYearValues[3].FiscalYear.FiscalYearName }}</th>
                    <th>{{control.FiscalYearValues[4].FiscalYear.FiscalYearName }}</th>
                    <th>{{control.FiscalYearValues[5].FiscalYear.FiscalYearName }}</th>
                    <th></th>
                <tr>
                    <ng-form name="edit" ng-submit="saveRow(control)" novalidate>
                        <td ng-show="control.editMode" colspan="2"><select name="Category" class="form-control" id="Category" required ng-model="control.Category" ng-options="category.CategoryName for category in categories track by category.Id"><option value="">Select Appropriation</option></select></td>
                        <td ng-show="!control.editMode" colspan="2">{{control.Category.CategoryName}}</td>

                        <td ng-show="!control.editMode">{{control.Description}}</td>
                        <td ng-show="!control.editMode" ng-style="common.setColorCurrency(control.FiscalYearValues[0].DeltaValue)">{{control.FiscalYearValues[0].DeltaValue | inThousands | currency : $ : 0}}</td>
                        <td ng-show="!control.editMode" ng-style="common.setColorCurrency(control.FiscalYearValues[1].DeltaValue)">{{control.FiscalYearValues[1].DeltaValue | inThousands | currency : $ : 0}}</td>
                        <td ng-show="!control.editMode" ng-style="common.setColorCurrency(control.FiscalYearValues[2].DeltaValue)">{{control.FiscalYearValues[2].DeltaValue | inThousands | currency : $ : 0}}</td>
                        <td ng-show="!control.editMode" ng-style="common.setColorCurrency(control.FiscalYearValues[3].DeltaValue)">{{control.FiscalYearValues[3].DeltaValue | inThousands | currency : $ : 0}}</td>
                        <td ng-show="!control.editMode" ng-style="common.setColorCurrency(control.FiscalYearValues[4].DeltaValue)">{{control.FiscalYearValues[4].DeltaValue | inThousands | currency : $ : 0}}</td>
                        <td ng-show="!control.editMode" ng-style="common.setColorCurrency(control.FiscalYearValues[5].DeltaValue)">{{control.FiscalYearValues[5].DeltaValue | inThousands | currency : $ : 0}}</td>

                        <td ng-show="control.editMode"><input name="Description" class="form-control input-md" id="Description" required="" type="text" placeholder="" ng-model="control.Description"></td>
                        <td ng-show="control.editMode" ng-style="common.setColorCurrency(control.FiscalYearValues[0].DeltaValue)"><input name="FY0" class="form-control input-md" id="FY0" required="" type="number" placeholder="" required ng-model="control.FiscalYearValues[0].DeltaValue"></td>
                        <td ng-show="control.editMode" ng-style="common.setColorCurrency(control.FiscalYearValues[1].DeltaValue)"><input name="FY1" class="form-control input-md" id="FY1" required="" type="number" placeholder="" required ng-model="control.FiscalYearValues[1].DeltaValue"></td>
                        <td ng-show="control.editMode" ng-style="common.setColorCurrency(control.FiscalYearValues[2].DeltaValue)"><input name="FY2" class="form-control input-md" id="FY2" required="" type="number" placeholder="" required ng-model="control.FiscalYearValues[2].DeltaValue"></td>
                        <td ng-show="control.editMode" ng-style="common.setColorCurrency(control.FiscalYearValues[3].DeltaValue)"><input name="FY3" class="form-control input-md" id="FY3" required="" type="number" placeholder="" required ng-model="control.FiscalYearValues[3].DeltaValue"></td>
                        <td ng-show="control.editMode" ng-style="common.setColorCurrency(control.FiscalYearValues[4].DeltaValue)"><input name="FY4" class="form-control input-md" id="FY4" required="" type="number" placeholder="" required ng-model="control.FiscalYearValues[4].DeltaValue"></td>
                        <td ng-show="control.editMode" ng-style="common.setColorCurrency(control.FiscalYearValues[5].DeltaValue)"><input name="FY5" class="form-control input-md" id="FY5" required="" type="number" placeholder="" required ng-model="control.FiscalYearValues[5].DeltaValue"></td>


                        <td ng-show="!control.editMode"><button name="button3id" ng-show="control.isEditable && $last" class="btn btn-success" ng-click="editRow(control)" id="button3id" popover-trigger="mouseenter" popover="Edit"><i class="fa fa-edit"></i></button></td>
                        <td ng-show="control.editMode" width="100px"><button name="button3id" class="btn btn-danger" ng-click="cancelEdit(control)" id="button3id" popover-trigger="mouseenter" popover="Cancel Changes"><i class="fa fa-undo"></i></button>&nbsp;<button type="submit" class="btn btn-success" id="saveRow" popover-trigger="mouseenter" popover="Save Changes"><i class="fa fa-save"></i></button></td>


                    </ng-form>

                </tr>
<table>

4

1 に答える 1

0

ng-repeat は、繰り返されるアイテムごとに子スコープを作成します。私の推測では、検証が機能しないスコープの可視性の問題があると思います。

ng-form ディレクティブの使用を検討してください:

http://www.benlesh.com/2013/03/angular-js-validating-form-elements-in.html

http://www.angularjshub.com/examples/forms/nestedforms/

これはあなたを助けることができる便利な記事です:

http://scotch.io/tutorials/javascript/building-dynamic-angular-forms-with-ngrepeat-and-ngform

于 2014-12-15T16:55:57.437 に答える