Question

尝试学习Angular ......和

我遗漏了一些非常明显的东西，我很确定。但是，我发现的所有示例，小提琴或掠夺者都在验证创建表单，而不是更新表单。

我的应用程序正在创建一个模态表单来添加/编辑客户端数据。如果传入了有效的clientId，则表单将作为编辑打开，并且数据将加载到表单中。

当我加载值时，我只是将值赋给模态的属性。由于它只是一个值，它没有$ invalid函数或任何其他很好的表单方法。没有它，验证不起作用。在Angular中将数据加载到表单中的正确方法是什么，以便可以对其进行验证？谢谢！

angular.module('app').controller("clientController",
    function ($scope, $modalInstance, dataService, clientId) {
        $scope.clientForm = {}
        $scope.clientForm.clientId = clientId;

        $modalInstance.opened.then(function () {
            if (clientId > 0) {
                dataService.getClient(clientId).then(function (clientData) {
                    $scope.clientForm.name = clientData.Name;
                    $scope.clientForm.address1 = clientData.Address1;
                    $scope.clientForm.address2 = clientData.Address2;
                    $scope.clientForm.city = clientData.City;
                    $scope.clientForm.stateId = clientData.StateId;
                    $scope.clientForm.zip = clientData.Zip;
                    $scope.clientForm.email = clientData.Email;
                });
            };
        });

        $scope.ok = function () {
            $scope.clientForm.$submitted = true;
            if ($scope.clientForm.$valid) {
                $modalInstance.close($scope.clientForm);
            }
        };

        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };
    }
)

表格形式：

<script type="text/ng-template" id="ClientEdit.html">
    <div class="modal-header">
        <h3 class="modal-title"><span>Client</span></h3>
    </div>
    <div class="modal-body col-md-12">
        <form name="clientForm" novalidate>                        
            <div class="form-group col-md-12">
                <label class="col-md-2 control-label text-right" for="txtclientName">Name: </label>
                <div class="col-md-6"><input class="form-control input-sm" id="txtclientName" type="text" ng-model="clientForm.name" required /></div>
                <p ng-show="clientForm.name.$invalid">Name is required.</p>
            </div>
            <div class="form-group col-md-12">
                <label class="col-md-2 control-label text-right" for="txtAddressLine1">Address 1: </label>
                <div class="col-md-6"><input class="form-control input-sm" id="txtAddressLine1" type="text" ng-model="clientForm.address1" /></div>
            </div>
            <div class="form-group col-md-12">
                <label class="col-md-2 control-label text-right" for="txtAddressLine2">Address 2: </label>
                <div class="col-md-6"><input class="form-control input-sm" id="txtAddressLine2" type="text" ng-model="clientForm.address2" /></div>.
            </div>
            <div class="form-group col-md-12">
                <label class="col-md-2 control-label text-right" for="txtCity">City: </label>
                <div class="col-md-2"><input class="form-control input-sm" id="txtCity" type="text" ng-model="clientForm.city" /></div>
                <label class="col-md-1 control-label text-right" for="txtZip">Zip: </label>
                <div class="col-md-2"><input class="form-control input-sm" id="txtZip" type="text" ng-model="clientForm.zip" /></div>
            </div>                        
            <div class="form-group col-md-12">
                <label class="col-md-2 control-label text-right" for="txtEmail">Email: </label>
                <div class="col-md-6"><input class="form-control input-sm" id="txtEmail" type="email" ng-model="clientForm.email" /></div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()" ng-disabled="clientForm.$invalid">Save</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</script>

在Angular中加载带有数据的模态表单

0 个答案: