如何在 Angular 1.X 和 Angular Material 中使用必填字段重置表单答案

【问题标题】：How to reset a form with required fields in Angular 1.X and Angular Material如何在 Angular 1.X 和 Angular Material 中使用必填字段重置表单
【发布时间】：2016-11-02 01:01:01
【问题描述】：

当我调用 $setPristine、$setUntouched 和 $setValidity 时，Angular 似乎没有清除 required 错误消息。然而，其他错误消息可以通过简单地设置为空来清除。

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

请参考plunkerhttps://plnkr.co/edit/boINmB?p=preview

【问题讨论】：

这看起来像是 angular-material 项目的问题。
@DanielA.White 可能你是对的。看起来材料改变了角度消息的默认工作方式，并且可能这个特定的用例是一个错误。
@DanielA.White 给你！这是 Angular Material 中的一个错误，与大多数其他问题一样，项目所有者将此问题标记为“已弃用”，并且线程现在已被锁定。 github.com/angular/material/issues/1903

标签： javascript angularjs angular-material

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您在重置函数中引用了this.form.amount

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();
}

【讨论】：

您的更改将直接修改 FormController 中的值，这只会工作一次，然后整个验证开始对金额字段出现故障。重新制作的步骤，1）聚焦场 2）聚焦场外，您可以看到所需的错误 3）按清除按钮，隐藏所需的错误（到目前为止一切顺利） 4）再次聚焦场并聚焦. 5) 未显示所需的错误消息（不好）

【解决方案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();
  }

【讨论】：

【解决方案4】：

只需拨打this.paymentForm.$setPristine(true)

【讨论】：

仍然角度不隐藏所需的错误消息。请随时与 plunker 一起玩