AngularJS子表单验证

时间:2016-09-08 05:33:12

标签: javascript angularjs forms

我有一个具有子表单的AngularJS表单,子表单用于将项目添加到列表中。如果单击“添加新选项”按钮并且addOption字段为空,则应显示所需的消息。如果单击“确定”按钮并且“标签”字段为空,则应显示所需的消息。目前,未显示所需的消息,并且“确定”按钮正在addOption字段上运行验证。我怎样才能做到这一点?我的代码如下:

<form id="editForm" name="editForm" ng-submit="editForm.$valid && okEdit()" novalidate>
    <md-input-container md-is-error="editForm.label.$invalid && (editForm.$submitted || editForm.label.$dirty)">
        <label>Label</label>
        <input required ng-model="selectedElement.templateOptions.label" name="label"type="text">
        <div ng-messages="editForm.label.$error" ng-if="editForm.$submitted">
        <div ng-message="required">Please enter a label.</div>
        </div>
    </md-input-container>

    <ng-form id="optionForm" name="optionForm">
        <div layout="row">
        <div flex>
            <md-input-container md-is-error="optionForm.addOption.$invalid && (optionForm.$submitted || optionForm.addOption.$dirty)" style="width:100%">
            <label>Add New Option</label>
            <input required ng-model="newOption" name="addOption" id="addOption" type="text">
            <div ng-messages="optionForm.addOption.$error" ng-if="optionForm.$submitted">
                <div ng-message="required">Please enter a value.</div>
            </div>
            </md-input-container>
        </div>
        <div flex="nogrow">
            <md-button class="md-fab md-raised md-mini md-fab-secondary" aria-label="Add New Option" ng-click="addNewOption($event)">
            <i class="material-icons">add</i>
            </md-button>
        </div>
        </div>
    </ng-form>


    <md-button type="submit" class="md-primary-short">OK</md-button>

</form>

0 个答案:

没有答案