Question

当我调用，$ setPristine，$ setUntouched和$ setValidity时，看起来Angular没有清除 required 错误消息。但是，只需设置null即可清除其他错误消息。

reset() {
    this.form.amount = null;
    this.paymentForm.$setPristine();
    this.paymentForm.$setUntouched();
    this.paymentForm.$setValidity();
  }

请参阅plunker https://plnkr.co/edit/boINmB?p=preview

Answer 1

我正在向此Angular Material缺陷发布答案（可能的解决方法）。只需将以下样式添加到项目中即可解决问题。

<style>
  .ng-untouched ~ .md-input-messages-animation {
     height: 0;
     opacity: 0;
     transition: height 0.3s, opacity 0.3s;
  }
</style>

Answer 2

您在重置功能

中引用了

reset() {
  this.form.amount = null;
  this.paymentForm.$setPristine();
  this.paymentForm.$setUntouched();
  this.paymentForm.$setValidity();
}

$ctrl.paymentForm.amount.$error

HTML中的

...和<div ng-messages="$ctrl.paymentForm.amount.$error" role="alert"> <div ng-message="required">Field is required</div> <div ng-message="dollar">Invalid dollar</div> <div ng-message="max">You don't have enough money</div> <div ng-message="dailyLimit">Daily payment limit reached</div> </div>。

this.form

将this.paymentForm更改为reset() { this.paymentForm.amount = null; this.paymentForm.$setPristine(); this.paymentForm.$setUntouched(); this.paymentForm.$setValidity(); }并且有效：

{{1}}

Answer 3

将this.form.amount = null更改为this.form.amount = undefined或delete this.form.amount

 reset() {
    delete this.form.amount;
    this.paymentForm.$setPristine();
    this.paymentForm.$setUntouched();
    this.paymentForm.$setValidity();
  }

Answer 4

只需致电this.paymentForm.$setPristine(true)

如何在Angular 1.X和Angular Material中重置包含必填字段的表单

4 个答案: