尝试学习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>