从表单控件Angular 6中删除验证器

Question

我有一个包含很多表单控件和一些控件的验证器的表单，例如：

title = new FormControl("", Validators.compose([
    Validators.required
]));
description = new FormControl("", [
    Validators.required,
    Validators.minLength(1),
    Validators.maxLength(2000)
]);

如何添加不验证控件的另存为草稿按钮？或删除它们？

我尝试了很多示例，例如：

saveDraft() {
   this.addProjectForm.controls.title.clearValidators();
   this.addProjectForm.controls.title.setErrors(null);
   this.addProjectForm.controls.title.setValidators(null);
}

要么

saveDraft() {
   this.addProjectForm.controls['title'].clearValidators();
   this.addProjectForm.controls['title'].setErrors(null);
   this.addProjectForm.controls['title'].setValidators(null);
}

但没有任何效果..

Answer 1

尝试这个：

this.addProjectForm.get('title').setValidators([]); // or clearValidators()
this.addProjectForm.get('title').updateValueAndValidity();

如果要添加验证器，则追加验证器数组：

this.addProjectForm.get('title').setValidators([Validators.required]);
this.addProjectForm.get('title').updateValueAndValidity();

注意：每次更改后都必须使用updateValueAndValidity（）

Answer 2

如果要从字段中删除验证器，可以尝试将其作为另一种解决方案：

public saveDraft(): void {
   this.addProjectForm.get('title').clearValidators();
   this.addProjectForm.get('title').updateValueAndValidity();
}

Answer 3

我已经尝试了以上所有内容，但对我来说以下代码有效。

let formControl : FormControl = this.formGroup.get("mouldVendor") as FormControl;
formControl.clearValidators();
formControl.setValidators(null);
formControl.updateValueAndValidity();

Answer 4

我已经使用“另存为草稿”功能实现了相当多的表单。

我通常做的是，将提交按钮保持为禁用状态，除非表单是valid. 但请保持“另存为草稿”按钮始终处于启用状态。

这允许我做的是，保存表单的内容而不应用任何验证，以防用户单击“另存为草稿”按钮。

无论如何，用户都无法单击“保存”按钮，因为表单无效。

所有这些都转化为如下代码：

<div class="image-flip">
  <div class="mainflip">
    <div class="frontside">
      <div class="card">
        <div class="card-body add-generic-card">

          <form [formGroup]="addGameForm">
            ...

            <div class="draft-publish-button">
              <button 
                class="..." 
                type="button" 
                (click)="onFormSubmit('DRAFT')">
                  Save as Draft
              </button>

              <button 
                class="..." 
                type="button" 
                (click)="onFormSubmit('PUBLISHED')" 
                [disabled]="addGameForm.invalid">
                  Publish
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>