web-dev-qa-db-fra.com

Supprimer les validateurs du contrôle de formulaire Angular 6

J'ai un formulaire avec beaucoup de contrôles de formulaire et de validateurs pour certains des contrôles, comme:

title = new FormControl("", Validators.compose([
    Validators.required
]));
description = new FormControl("", [
    Validators.required,
    Validators.minLength(1),
    Validators.maxLength(2000)
]);

Comment ajouter un bouton Enregistrer en tant que brouillon qui ne valide pas les contrôles? Ou les supprimer?

J'ai essayé de nombreux exemples tels que:

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

ou

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

mais rien ne marche ..

angularangular-formsreactive-formsangular-formbuilder
8
Mohammed

J'ai implémenté un grand nombre de formulaires avec cette fonctionnalité Enregistrer sous forme de brouillon.

Ce que je fais généralement, c'est que le bouton Soumettre reste désactivé, sauf si le formulaire est valid. Mais gardez le bouton Enregistrer comme brouillon comme toujours activé.

Ce que cela me permet de faire, c'est d'enregistrer le contenu du formulaire sans appliquer de validation au cas où l'utilisateur clique sur le bouton Enregistrer en tant que brouillon.

L'utilisateur ne peut de toute façon pas cliquer sur le bouton Enregistrer car le formulaire n'est pas valide.

Tout cela se traduit par un code comme celui-ci:

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

Essaye ça:

this.addProjectForm.get('title').setValidators([]); // or clearValidators()
this.addProjectForm.get('title').updateValueAndValidity();

Si vous souhaitez ajouter un validateur, ajoutez un tableau de validateurs:

this.addProjectForm.get('title').setValidators([Validators.required]);
this.addProjectForm.get('title').updateValueAndValidity();

Remarque: Vous devez utiliser updateValueAndValidity () après chaque modification

10
Admir

Vous pouvez essayer de suivre une autre solution si vous souhaitez supprimer le validateur de votre champ:

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

J'ai trouvé que la meilleure solution est de ne pas avoir de validation sur les champs de saisie (contrôles de formulaire), puis d'ajouter ce code pour permettre au bouton d'envoi d'être pressé:

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

}

0
Mohammed