Question

我有一些输入的表格。有一段时间我通过对此表单的一些输入有另一种形式。当我没有内部表格时，我的父表格是有效的，但是当我有原始形式的内部并且原始表格有效（我看到输入完全正确）并且内部表格无效时，我的原始表格也是无效的。如果单击submit1我需要以原始形式保存输入，如果单击submit2，我需要保存内部输入。

在网络表单中，我们对验证进行了分组。我们是否已经在这个案例的角度验证中将其分组为webform？

<form name="original" novalidate class="form-horizontal bv-form">
    <div class="col-md-3 col-sm-6" ng-class="{ 'has-error': !original.name.$pristine && original.name.$invalid ,'has-success':!original.name.$invalid}">
    <label>Name</label>
    <input auto-focus class="form-control" type="text" name="name" ng-model="vm.original.name" required />
    <i class="form-control-feedback glyphicon" ng-class="{ 'glyphicon-ok' : original.name.$dirty && original.name.$valid , 'glyphicon-remove': original.name.$dirty && original.name.$invalid}" data-bv-icon-for="firstName" ng-show="original.name.$dirty">
    </i>
    <div>
    <span class="help-block " ng-show="original.name.$invalid && !original.name.$pristine">
    name required
    </span>
    </div>
    </div>
<form name="internal" novalidate class="form-horizontal bv-form">
<div class="col-md-3 col-sm-6" ng-class="{ 'has-error': !internal.name.$pristine && internal.name.$invalid ,'has-success':!internal.name.$invalid}">
    <label>Name</label>
    <input auto-focus class="form-control" type="text" name="name" ng-model="vm.internal.name" required />
    <i class="form-control-feedback glyphicon" ng-class="{ 'glyphicon-ok' : internal.name.$dirty && internal.name.$valid , 'glyphicon-remove': internal.name.$dirty && internal.name.$invalid}" data-bv-icon-for="firstName" ng-show="internal.name.$dirty">
    </i>
    <div>
    <span class="help-block " ng-show="internal.name.$invalid && !internal.name.$pristine">
    name required
    </span>
    </div>
    </div>
<button type="submit" id="submit2"  class="btn btn-primary blue" ng-click="int=internal.$valid && $scope.save2()">
</form>
<button type="submit" id="submit1" class="btn btn-primary blue" ng-click="original.$valid && $scope.save()">
</form>

Answer 1

如果您将ng-form嵌套在form中，则应使用forms代替form，以获取更多信息，请参阅ng-form文档。

表单指令的Nestable别名。 HTML不允许嵌套表单元素。嵌套表单很有用，例如，如果a的有效性需要确定控制小组。

Answer 2

我找到了解决方案。

在这种情况下，我使用ng-if来阻止在提交外部表单时对内部表单进行验证。

如果客户在外部表格上工作，我隐藏了内部表格，我可以提交外部表格。当客户尝试提交内部表格时，我会将其显示给客户，我可以通过内部表格的有效性输入并提交。

angularjs形式具有内部形式的验证

2 个答案: