基本以 Angular 方式保存表单数据答案

【问题标题】：Basic Save form data the Angular way基本以 Angular 方式保存表单数据
【发布时间】：2016-12-26 21:19:51
【问题描述】：

我正在尝试找出使用 Angular 获取和设置表单数据的“正确”方式。（“正确”是指支持更大应用程序的可扩展性，其中控制器不是过于简单，带有快捷方式引用，就像在大多数演示中一样。）当我查看示例时，似乎很基本（例如没有控制器作为说明符），我无法弄清楚什么指向什么。

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

即：这是 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 模型？我是否正确使用了 $error？

我的 model 应该是与我的 form 不同的对象吗？也许我的模型应该指向 settingsVm.settingsData 而不是 settingsVm.settingsForm。

这是我的提交：

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

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

【问题讨论】：

现在遇到同样的问题

标签： angularjs forms

【解决方案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>

【讨论】：