Удалить валидаторы из формы управления 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

Я обнаружил, что лучшее решение - не проверять поля ввода (элементы управления формой), а затем добавить этот код, чтобы разрешить нажатие кнопки отправки:

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

}

Answer 2

Если вы хотите удалить валидатор из своего поля, попробуйте следующее решение:

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

Answer 3

Попробуйте это:

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