创建动态表单并在AngularJS中验证/发布它

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模型中始终有一个点，并始终在控制器中初始化表单模型：

$scope.formModel = {};

<input ng-model="formModel.email" ...>

这也会使事情变得更简单，因为发布表格，你所要做的就是

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