Question

所以，我有一个父表单，其中包含一组嵌套的ng-forms，如下所示：

<form class="row" name="parentForm" ng-repeat="model in controller.addresses track by $index" novalidate>
    <div class="col-xs-12 row-title">
        <h1>{{ model.type || 'Delivery' }} address</h1>
    </div>

    <div class="col-xs-12 col-sm-4 col-lg-4">
        <div class="form" name="saveForm" ng-form>
            <div class="form-group">
                <label class="control-label">Company name</label>
                <input class="form-control" name="company" type="text" placeholder="Enter your company name" ng-model="model.company" />
            </div>

            <div class="form-group" ng-class="{ 'has-error' : saveForm.address1.$invalid && !saveForm.address1.$pristine }">
                <label class="control-label">House name/number</label>
                <input class="form-control" name="houseName" type="text" placeholder="Please enter your address 1" ng-model="model.houseName" ng-minlength="3" required />
            </div>

            <div class="form-group">
                <label class="control-label">Street</label>
                <input class="form-control" name="street" type="text" placeholder="Please enter your address 2" ng-model="model.street" />
            </div>

            <div class="form-group">
                <label class="control-label">Town</label>
                <input class="form-control" name="town" type="text" placeholder="Please enter your address 3" ng-model="model.town" />
            </div>

            <div class="form-group">
                <label class="control-label">County</label>
                <input class="form-control" name="county" type="text" placeholder="Please enter your address 4" ng-model="model.county" />
            </div>

            <div class="form-group" ng-class="{ 'has-error' : saveForm.postCode.$invalid && !saveForm.postCode.$pristine }">
                <label class="control-label">Post code</label>
                <input class="form-control" name="postCode" type="text" placeholder="Enter your post code" ng-model="model.postCode" ng-minlength="3" required />
            </div>
        </div>
    </div>
</form>

然后我有一个按钮：

<div class="row">
    <div class="col-xs-12 col-sm-4 col-lg-4">
        <div div class="row">
            <div class="col-xs-6 tile">
                <a class="red" ui-sref="^">
                    <i class="fa fa-trash"></i>
                    <div class="footer">Back</div>
                </a>
            </div>

            <div class="col-xs-6 tile" ng-if="parentForm.$valid">
                <a class="yellow" ui-sref="^.finance">
                    <i class="fa fa-arrow-right"></i>
                    <div class="footer">Continue</div>
                </a>
            </div>

        </div>
    </div>
</div>

我希望此按钮仅显示所有子表单是否有效。我希望我可以使用parentForm.$valid，但这不起作用。有谁知道如何解决这个问题？

Answer 1

尝试使用parentForm.saveForm。$ valid。

它会起作用

Answer 2

嵌套表单在HTML5中无效 - 但您可以将saveForm放在parentForm之外，然后使用input元素的form属性为输入元素指定表单。

<form name="form1">
  <input type="string" ng-model="form1input" required>
  <input type="string" form="form2" ng-model="form2input" required>
</form>
<div ng-form="form2" id="form2"></div>
<button ng-if="form1.$valid && form2.$valid">Click</button>

Plunker：https://plnkr.co/edit/y9ipsNoEW596guLf2CzM?p=preview

在ng-repeat中使用ng-form并检查所有表单的验证状态

2 个答案: