我有一个具有子表单的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>