angularjs 具有内部表单的表单验证

Question

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

在网络表单中，我们对验证进行了分组。在这种情况下，我们是否在 angular 验证的网络表单中进行了分组？

<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

如果您将 forms 嵌套在 form 中，则应使用 ng-form 而不是 form 有关详细信息，请参阅 ng-form 文档。

Nestable alias of form directive. HTML does not allow nesting of form elements. It is useful to nest forms, for example if the validity of a sub-group of controls needs to be determined.

Answer 2

我找到了我的解决方案。

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

如果客户处理外部表单，我隐藏了内部表单，我可以提交外部表单。当客户尝试提交内部表格时，我将其展示给客户，我可以验证内部表格输入并提交。

angularjs 具有内部表单的表单验证

angularjs form validation that has an internal form

validation

angularjs

angularjs-validation