如何在AngularJS中的一个提交按钮中验证两个表单?

时间:2016-09-19 06:25:18

标签: angularjs validation

我是AngularJS的初学者。所以我对这种语言有点困惑。请检查我的代码:

<form class="form-horizontal" ng-submit="productFormForm.$valid && submitProductForm()" novalidate="" name="productFormForm">
    <label for="from_id_dropdown">Templates</label>
    <select class="form-control" name="from_id_dropdown" id="from_id_dropdown" ng-model="formData.form_id" ng-change="getDropdownOptions(formData.form_id)" ng-options="option.id as option.name for option in forms_dropdown.availableOptions" required="">
        <option value="">Select Template</option>
    </select>
    <div ng-show="productFormForm.$submitted || productFormForm.from_id_dropdown.$touched" class="">
        <span style="color:red;" ng-show="productFormForm.from_id_dropdown.$error.required">Template is required.</span>
    </div>
</form>

<form class="form-horizontal" ng-submit="attributeForm.$valid && submitForm()" novalidate="" name="attributeForm">
    <label class="tooltip-demo">Label</label>
    <input type="text" name="attribute_lebel" ng-model="attr_value.label" class="form-control" placeholder="Label Name" required="">
    <div ng-show="attributeForm.$submitted || attributeForm.attribute_lebel.$touched" class="">
        <span class="text-danger" ng-show="attributeForm.attribute_lebel.$error.required">Label is required.</span>
    </div>


    <button class="btn btn-w-m btn-success" type="submit">Save</button>
</form>

这是两个表单productFormFormattributeForm但是一个提交按钮是第二种形式。我想验证这两个字段是否为空白。

1 个答案:

答案 0 :(得分:0)

您可以使用js验证两个表单 - example

或在html中添加<span>按钮后 -

 <span ng-show="attributeForm.attribute_lebel.$error.required || productFormForm.from_id_dropdown.$error.required"> Form not valid</span>