角度6材质表单重置使验证错误出现[重复]

Question

这个问题在这里已有答案：

• resetting reactive form triggers all required validators in Angular 6 2回答

当我第一次加载页面时，表单显示如下

但在我成功创建公告后，我使用this.announcementCreateForm.reset()代码重置页面，并重置以下方式

我在buildAnnouncementForm()期间调用以下方法ngOnInit()

 private buildAnnouncementForm() {
    this.announcementCreateForm = this.fb.group({
      announcementTitle: ['', [Validators.required]],
      announcementText: '',
      announcementFor: ['', [Validators.required]],
      announcementType: ['', [Validators.required]],
      announcementFromDate: [this.announcementFromDate, Validators.required],
      announcementToDate: [this.announcementToDate, Validators.required]
    });
  }

我在reset之后称之为success方法

resetAnnouncementPage() {
    if (this.announcementCreateForm.valid) {
      console.log("Reset...");
      this.announcementCreateForm.reset();
      this.announcementCreateForm.markAsPristine();
      //this.announcementCreateForm.markAsUntouched();
    }
  }

我的重置，希望我在加载过程中带上它看起来的形状..怎么做？

Answer 1

如果要将表单恢复为初始状态，则将该状态存储在值中，并在需要重置表单时使用它来设置表单值，不要执行form.reset()，它将删除表中的空字符串来自控件。

initialFormValue = {
    announcementTitle: '',
    announcementText: '',
    announcementFor: '',
    announcementType: '',
    announcementFromDate: this.announcementFromDate,
    announcementToDate: this.announcementToDate
}

resetAnnouncementPage() {
    if (this.announcementCreateForm.valid) {
      console.log("Reset...");
      this.announcementCreateForm.setValue(this.initialFormValue);
      this.announcementCreateForm.markAsPristine();
    }
}

编辑

您还可以在执行表单reset()时传递值以重置。

private _initialValue

private buildAnnouncementForm() {

    this.announcementCreateForm = this.fb.group({
      announcementTitle: ['', [Validators.required]],
      announcementText: '',
      announcementFor: ['', [Validators.required]],
      announcementType: ['', [Validators.required]],
      announcementFromDate: [this.announcementFromDate, Validators.required],
      announcementToDate: [this.announcementToDate, Validators.required]
    });

    this._initialValue = this.announcementCreateForm.value

}

resetAnnouncementPage() {

    if (this.announcementCreateForm.valid) {
      this.announcementCreateForm.reset(this._initialValue);
    }

}

Answer 2

您必须将其标记为原始且未触及，然后重新验证。

this.announcementCreateForm.reset();
this.announcementCreateForm.markAsPristine();
this.announcementCreateForm.markAsUntouched();
this.announcementCreateForm.updateValueAndValidity();

Answer 3

我按照这些步骤实现了它

将formDirective添加到表单并将其传递给我的onSubmit方法

 <form #formDirective="ngForm" (ngSubmit)="onSubmit(formDirective)" [formGroup]="announcementCreateForm">

通过formDirective论证到我的reset方法和reset formDirective首先然后我做了reset form

resetAnnouncementPage(formDirective:FormGroupDirective) {
    if (this.announcementCreateForm.valid) {
      formDirective.resetForm();
      this.announcementCreateForm.reset();
    }
  }