formes réactives - Ignorer la validation sur Annuler

Question

J'ai une forme réactive qui a Annuler et boutons de soumission:

<button (click)="cancel($event)" type="button" class="ui button">Cancel</button> 
<button [disabled]="..." type="submit" class="ui button primary">Store</button> 

et maintenant si je clique sur un Submit coups de pied de validation de bouton (magasin) - tout bon. Mais si je clique sur Annuler cela déclenche également la validation. Je me demande pourquoi? Je n'ai pas besoin de validation sur Annuler. Que dois-je faire pour l'éteindre?

Answer 1

Je voudrais réinitialiser le FormGroup lorsque le bouton Cancel est cliqué. Cela effacerait complètement la forme et forcerait tous les états d'entrée à être prestine à nouveau. Vous devriez utiliser les états d'entrée pour vérifier s'ils ont été utilisés ou non si vous ne l'avez pas déjà fait. Cela empêchera la validation de s'exécuter sur une entrée de formulaire qui n'a pas encore été utilisée.

Component

constructor() { 
    this.Form = initForm(); 
} 

initForm() { 
    return this._FormBuilder.group({ 
     fieldOne: ['', Validators.required] 
    }) 
} 

Entrée

<div class="ui input" [class.error]="Form.get('fieldOne').dirty && !Form.get('fieldOne').valid"> 
    <input type="text" placeholder="Search..." formControlName="fieldOne"> 
</div> 

Bouton

<button (click)="initForm()" type="button" class="ui button">Cancel</button> 

post-scriptum il semble que vous utilisiez l'interface utilisateur sémantique, donc mon HTML est formaté en conséquence. Sinon, vous devrez le retravailler un peu.

Answer 2

Vous pouvez simplement 'réinitialiser' le formControl s dans le parent formGroup sur annuler le bouton clic si cela vous convient.

cancel() { 
this.form.reset(); 
}