Angularjs 以角度方式保存表单数据的基本方法

我试图找出使用Angular获取和设置表单数据的“正确”方法。（我所说的“正确”是指支持扩展到更大的应用程序，在这些应用程序中，控制器并不像大多数演示中那样过于简单，具有快捷引用。）当我查看这些示例时，它们看起来非常基本（例如没有controllerAs说明符），以至于我无法理解它们所指的是什么

无论如何，我希望在我的viewmodel中的某个地方有一个对象，控制器可以访问该对象，该对象包含其命名字段中的数据，适合放入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:""

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

---

不确定这是否会帮助你3个月后，但我明白了，请纠正我，如果我错了什么地方

是的，您的陈述是正确的，您实际上需要将表单验证和输入字段分开

我假设在使用字段验证时，实际使用的是输入字段名，而不是ng模型值。这对我来说很有用

var myapp=angular.module（“taskApp”，[]）
.controller（“taskCtrl”，函数（$scope，$http）{
$scope.form={}；
$scope.makeTask=函数（数据）{
console.dir（数据）；
}
});

不确定这是否会帮助你3个月后，但我明白了，请纠正我，如果我错了什么地方

是的，您的陈述是正确的，您实际上需要将表单验证和输入字段分开

我假设在使用字段验证时，实际使用的是输入字段名，而不是ng模型值。这对我来说很有用


var myapp=angular.module（“taskApp”，[]）
.controller（“taskCtrl”，函数（$scope，$http）{
$scope.form={}；
$scope.makeTask=函数（数据）{
console.dir（数据）；
}
});

现在有同样的问题现在有同样的问题
        <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>

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

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