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

但是什么都没用...

- Mohammed

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()。

- Admir

---

干净利落的回答 - MJ X

在我的情况下，这是完美的答案。 - Buddha

请注意，执行 this.addProjectForm.updateValueAndValidity() 不会更新所有子级表单控件。如果您想清除每个 formControl，则必须在每个子级上调用 clearValidators 和 updateValueAndValidity。 - Random

Answer 2

如果您想从您的字段中删除验证器，您可以尝试以下方法作为另一种解决方案：

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

- billyjov

Answer 3

我已经尝试过上述所有方法，但以下代码对我有效。

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

- Kapil Thakkar

Answer 4

我已经使用了“保存为草稿”功能实现了很多表单。

通常我会将提交按钮保持禁用状态，除非表单是有效的。但始终启用“保存为草稿”按钮。

这样可以在用户点击“保存为草稿”按钮时保存表单内容而不应用任何验证。

由于表单无效，用户无法单击保存按钮。

所有代码都可以像这样转换:

<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>

- SiddAjmera

---

基本上，当用户使用提交按钮时，必须填写所有内容，但是保存为草稿将起作用，因为控件上没有验证 - 可能有效，将尝试一下。 - Mohammed

你能给我展示一个例子吗？我已经尝试过这个，但是因为没有验证，所以在输入第一个输入字段后提交按钮始终处于活动状态。 - Mohammed

Answer 5

这可能对某些人有所帮助。 由于另一个字段的 ".valuechanges" 订阅，我最终添加了验证，当我尝试清除它们时，什么也没有发生。

解决方案是在 formcontrol 上使用方法 .clearAsyncValidators()，而不是通常的 clearValidators()。

您仍然需要更新值和有效性，但这对我有用。

祝编码愉快！

- iamaword

Answer 6

您可以使用：AbstractControl.removeValidators(ValidatorFn)

不确定在Angular 6中是否可行，但在Angular 12及更高版本中肯定可以。 但是需要引用完全相同的函数。 仅提供Validators.required是无效的。您需要创建一个唯一的引用：

requiredValidator = Validators.required;
   
this.form = this._fb.group({
    title: ['', [this.requiredValidator, Validators.minLength(3), Validators.maxLength(50)]],
    description: ['', [this.requiredValidator, Validators.minLength(3)]]
}); 

saveDraft() {
    this.title.removeValidator(this.requiredValidator); 
}

get title(): AbstractControl {
  return this.form.get('title');
}

- Tombalabomba

Answer 7

我发现最好的解决方案是不对输入字段（表单控件）进行任何验证，然后添加此代码以允许提交按钮被按下：

ngAfterViewInit() {
this.addProjectForm.valueChanges.subscribe(data => {
  //console.log(data)

  if(data.title.length != 0 &&
    data.description.length != 0 &&
    data.ddemployees.length != 0 &&
    data.competences.includes(true) &&
    data.methods.includes(true) &&
    data.enddate.length != 0 &&
    data.contactname.length != 0 &&
    data.contactemail.length != 0 &&
    data.contactphonenumber.length != 0 
    ) {
    //console.log(data.title.length)
    this.allowSubmit = true;
  } 
});

}

- Mohammed

---

它将不会创建一个良好的响应式设计。用户在提交之前需要知道这是一个好的模式。 - MJ X