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

or

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

но ничего не работает..


angular angular-forms angular-formbuilder reactive-forms
person Mohammed    schedule 27.11.2018    source источник

Ответы (6)


arrow_upward
2
arrow_downward

Я реализовал довольно много форм с помощью функции «Сохранить как черновик».

Что я обычно делаю, так это просто отключаю кнопку «Отправить», если только форма не 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>
person SiddAjmera    schedule 27.11.2018
comment
Таким образом, в основном пользователь должен заполнить все при использовании кнопки отправки, но сохранение как черновик будет работать, потому что в элементах управления нет проверки - может сработать, попробуем. - person Mohammed; 27.11.2018
comment
Можете ли вы показать мне пример? Я пробовал это, но из-за отсутствия проверки кнопка отправки всегда активна после ввода в первое поле ввода. - person Mohammed; 28.11.2018

arrow_upward
33
arrow_downward

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

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() после каждого изменения.

person Admir    schedule 27.11.2018
comment
Хороший и чистый ответ - person MJ X; 30.10.2019
comment
Идеальный ответ в моем случае - person Buddha; 25.06.2020
comment
Обратите внимание, что при выполнении this.addProjectForm.updateValueAndValidity() не обновляются все дочерние элементы. Если вы хотите очистить каждый formControl, вам нужно вызвать clearValidators и updateValueAndValidity для каждого дочернего элемента... - person Random; 30.12.2020

arrow_upward
11
arrow_downward

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

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

arrow_upward
3
arrow_downward

Я пробовал все вышеперечисленное, но для меня сработал следующий код.

let formControl : FormControl = this.formGroup.get("mouldVendor") as FormControl;
formControl.clearValidators();
formControl.setValidators(null);
formControl.updateValueAndValidity();
person Kapil Thakkar    schedule 09.11.2019

arrow_upward
1
arrow_downward

Это может кому-то помочь. Я закончил тем, что добавил проверку в результате подписки на другие поля '.valuechanges', и когда я пошел, чтобы очистить их, это ничего не дало.

Решение заключалось в использовании метода .clearAsyncValidators() в элементе управления формой вместо обычного метода clearValidators().

Вам все еще нужно обновить ValueAndValidity(), но это сработало для меня.

Удачного кодирования!

person iamaword    schedule 27.05.2020

arrow_upward
-1
arrow_downward

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

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

}

person Mohammed    schedule 01.12.2018
comment
Это создаст не очень хороший адаптивный дизайн. пользователь должен знать, прежде чем отправлять хиты, что это хороший шаблон - person MJ X; 29.10.2019