Question

我正在AngularJS中使用一个非常简单的表单，它只有一个textarea输入和一个提交按钮。 textarea是必填字段。一切正常......直到我提交了表格。当我在提交表单后从模型中删除值时，这会触发我的验证错误。如果我没有将值设置为null或空字符串，则textarea会保留输入的值，这不是我想要的。

<form name="notesForm" class="form-horizontal" ng-submit="vm.addNotesForm(notesForm)" novalidate>
<div control-validator="" validator-condition="vm.hasTriedToSubmit">
    <div class="col-sm-10">
        <!-- hidden field workaround for validation for textarea -->
        <input type="hidden" id="hiddenNewNote" name="hiddenNewNote" required ng-model="vm.newNote.note" />
        <textarea id="newNote"
                  name="newNote"
                  class="form-control"
                  placeholder="Note"
                  ng-disabled="vm.isWorking"
                  ng-model="vm.newNote.note"
                  rows="3"></textarea>
        <control-validator-message>Note is required.</control-validator-message>
    </div>
    <div class="col-sm-2">
        <button class="btn btn-success" type="submit" ng-disabled="vm.isWorking">
            <i class="fa fa-save"></i>
            Add Note
            <i class="fa fa-circle-o-notch fa-spin" ng-show="vm.isWorking"></i>
        </button>
    </div>
</div>

由于验证仅适用于输入字段，因此隐藏字段是必需的。

this.notesService.addNote(this.newNote).then(() => {
    this.notificationService.success('Successfully added new AR Note');
    this.isWorking = false;
    this.newNote.note = null; // <- This is where it goes sideways.
    this.refreshDataTable();
}, errorMessage => {
    this.notificationService.error(errorMessage);
    this.isWorking = false;
});

我尝试过各种各样的解决方案。我使用FormController将表单设置为原始和未触动 - 没有运气。我看到了一个建议的解决方案，其中表单上的控件以编程方式设置为“未定义”。仍然没有运气。表单提交和我的值保留在我的textarea中，或者我将注释设置为null /空字符串，并且验证错误被设置为好像我试图在textarea中没有值发布。作为一个完全黑客，我甚至尝试使用jQuery将textarea的值设置为空字符串，同时保持模型状态不受干扰。虽然这看起来确实有效，但由于该值仍存储在模型中，因此如果用户再次单击添加按钮，则会重新发布。不是我需要的。我认为这会很简单，但经过一个小时的在线寻找答案后，我没有想出任何有效的方法。

如何在AngularJS中重置表单

0 个答案: