创建动态表单并在 AngularJS 中 validate/post

Question

我在 AngularJS 中有一个带有用户名和密码输入字段的登录表单。上方有一个用于加载注册表单的按钮。然后将在表单中添加一个电子邮件字段。

但是当我提交注册表时，只有用户名和密码输入字段会被发布，而不是电子邮件字段。

Send Data after Login: {"username":"test","password":"test"}
Send Data after Register: {"username":"test","password":"test"}

你知道为什么吗？

我创建了一个 Plnkr 来演示这个问题： http://embed.plnkr.co/HBEfITT3SNSZv44hj2x3/preview

Answer 1

您的附加字段位于具有

的元素内

ng-if="register"

ng-if 是一个创建自己作用域的指令。因此，当在字段 <input ng-model="email" ...> 中输入内容时，将在 ng-if 范围中创建并填充电子邮件属性 ，而不是在控制器范围中创建。

经验法则：在你的 ng-model 中始终有一个点，并且始终在控制器中初始化表单模型：

$scope.formModel = {}; <input ng-model="formModel.email" ...>

这也会使事情变得更简单，因为对于 post 表单，您所要做的就是

$http.post(url, $scope.formModel).then(...);

创建动态表单并在 AngularJS 中 validate/post

Create dynamic form and validate/post it in AngularJS

angularjs

angular-material