Question

我试图找出使用Angular获取和设置表单数据的“正确”方法。（通过“正确”我的意思是支持可扩展性到更大的应用程序，其中控制器不是过于简单，具有快捷方式引用，因为它们在大多数演示中。）当我看看这些示例时，看起来如此基本（例如没有controllerAs说明符，我无法弄清楚什么是指向什么。

无论如何，我希望我的视图模型中有一个对象，可以由控制器访问，其中包含其命名字段中的数据，适合PUTing到api - 而不包含与实际表单和字段对象关联的所有内容：

To-wit：这就是settingsVm.settingsForm包含的内容：

$dirty:true
$error:{}
$invalid:false
$name:"settingsVm.settingsForm"
$pristine:false
$submitted:true
$valid:true
Email:"asdsa@asdsad.com"
Id:{$validators: {}, $asyncValidators: {}, $parsers: [], $formatters: [], $viewChangeListeners: [],…}
$asyncValidators:{}
$dirty:false
$error:{}
$formatters:[]
$invalid:false
$name:"Id"
$options:null
$parsers:[]
$pristine:true
$touched:false
$untouched:true
$valid:true
$validators:{}
$viewChangeListeners:[]
StreetDirection:""
StreetName:"asdasdsadsada"
StreetNumber:"34"
Suite:""

这是我的表单，只有几个字段：

        <input type="hidden" name="Id" ng-model="settingsVm.settings.Id" />

        <div class="form-group row">
            <label for="Email" class="col-sm-1 col-form-label text-right"> Email:</label>
            <div class="col-sm-5">
                <input type="text" class="form-control form-group-med" maxlength="50" name="Email" ng-model="settingsVm.settingsForm.Email" required />
                <div class="error-message" ng-show="settingsVm.settingsForm.Email.$invalid && settingsVm.settingsForm.Email.$touched || settingsVm.settingsForm.submitted">
                    <span ng-show="settingsVm.settingsForm.Email.$error.required"> Email is required.</span >
                </div>
            </div>
        </div>


        <div class="form-group row">
            <label for="StreetName" class="col-sm-1 col-form-label text-right"> Name:</label>
            <div class="col-sm-5">
                <input type="text" class="form-control form-group-med" maxlength="50" name="Email" ng-model="settingsVm.settingsForm.StreetName" required />
                <div class="error-message" ng-show="settingsVm.settingsForm.StreetName.$invalid && settingsVm.settingsForm.StreetName.$touched || listingVm.submitted">
                    <span ng-show="settingsVm.settingsForm.StreetName.$error.required">Street Name is required.</span >
                </div>
            </div>
        </div>            
</form>

我是否正确使用ng-model？我正确使用$ error吗？

模型应该是表单的独特对象吗？也许我的模型应该指向settingsVm.settingsData而不是settingsVm.settingsForm。

这是我的提交：

    vm.submit = function (isValid) {
        vm.submitted = true;

        if (isValid) {
            settingsService.putSettings(vm.settingsForm);
        }
    };

Answer 1

不确定这会在3个月后对你有所帮助，但我想出来了，如果我错了，请纠正我。

是的，你的陈述是对的，你实际上需要分开表格验证和输入字段。

我假设当您使用字段验证时，实际上使用输入字段名称而不是ng-Model值。所以这对我有用

var myapp = angular.module("taskApp", [])
  .controller("taskCtrl", function($scope, $http) {

    $scope.form = {};

    $scope.makeTask = function(data) {
      console.dir(data);

    }

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-App="taskApp" ng-controller="taskCtrl">
  <form name="TaskForm" novalidate ">
  <div class="form-group ">
    <label>Name</label>
    <input name="Name " ng-required="true " class="form-control " ng-model="form.Name " />
    <span ng-show="TaskForm.Name.$invalid && TaskForm.Name.$dirty ">The name is required</span>
  </div>
  <button ng-Click="makeTask(form) " type="submit ">Add</button>

</form>

<div id="output ">OUTPUT</div>

基本保存表单数据Angular方式

1 个答案: