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

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

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

或

---

但是什么都不管用。

我已经用这个“另存为草稿”功能实现了很多表单

我通常要做的是，除非表单

有效

，否则将提交按钮保持为禁用状态。但保持“另存为草稿”按钮始终处于启用状态

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

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

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

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

...
另存为草稿
发表

如果要从字段中删除验证程序，可以尝试以下解决方案：

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

试试这个：

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

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

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

---

}

我已经尝试了以上所有方法，但对我来说，下面的代码是有效的

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

这可能对某人有所帮助。 由于订阅了另一个字段“.valuechanges”，我最终添加了验证，当我去清除它们时，什么也做不了

解决方案是在formcontrol上使用方法.clearAsyncValidators（），而不是典型的clearValidators（）

您仍然需要更新evalueandvality（），但这对我很有效

---

快乐编码

因此，基本上用户在使用提交按钮时必须填写所有内容，但是“另存为草稿”会起作用，因为控件上没有验证-可能会起作用，会尝试一下吗？你能给我举个例子吗？我已经试过了，但是因为没有验证，提交按钮在第一个输入字段中输入后总是处于活动状态。它不会创建一个良好的响应设计。用户需要在点击submit之前知道这是一个好的模式，简洁明了的回答在我的案例中完美的回答请注意，执行

this.addProjectForm.updateValueAndValidity（）

不会更新所有的子项。如果要清除每个formControl，必须对每个子项调用

clearValidators

和

updateValueAndValidity

。。。

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