18

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

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

但没有任何效果..

4

7 回答 7

33

尝试这个：

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

于 2018-11-27T20:24:21.920 回答
11

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

public saveDraft(): void {
   this.addProjectForm.get('title').clearValidators();
   this.addProjectForm.get('title').updateValueAndValidity();
}
于 2018-11-27T20:20:15.433 回答
4

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

let formControl : FormControl = this.formGroup.get("mouldVendor") as FormControl;
formControl.clearValidators();
formControl.setValidators(null);
formControl.updateValueAndValidity();
于 2019-11-09T10:03:37.343 回答
2

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

我通常做的是，将提交按钮保持为禁用状态，除非表单是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>
于 2018-11-27T20:17:28.543 回答
1

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

解决方案是在表单控件上使用.clearAsyncValidators()方法，而不是典型的 clearValidators()。

您仍然必须更新ValueAndValidity()，但这对我有用。

快乐编码！

于 2020-05-27T22:33:32.210 回答
0

您可以使用： 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');
}
于 2021-12-20T20:34:00.910 回答
-1

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

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

}

于 2018-12-01T21:23:22.640 回答