Reactive Forms - Validierung überspringen auf

Question

Abbrechen ich eine reaktive Form haben, die Tasten Abbrechen und Absenden hat:

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

und jetzt, wenn ich auf einem Senden klicken (Store), um die Validierung Tritte in - alles gut. Aber wenn ich auf Abbrechen klicke, wird auch die Validierung ausgelöst. Ich wundere mich warum? Ich brauche keine Validierung bei Abbrechen. Was muss ich tun, um es auszuschalten?

Answer 1

Ich würde erneut initialisieren FormGroup wenn die Cancel Schaltfläche geklickt wird. Dies würde die Form vollständig löschen und alle Eingangszustände zwingen, erneut zu prestinieren. Sie sollten Eingabezustände verwenden, um zu überprüfen, ob sie verwendet wurden oder nicht, falls Sie dies nicht bereits getan haben. Dadurch wird verhindert, dass die Validierung auf einer Formulareingabe ausgeführt wird, die noch nicht verwendet wurde.

Component

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

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

Eingangs

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

Knopf

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

P.S. es sieht so aus, als ob Sie die Semantic UI verwenden, also ist mein HTML entsprechend formatiert. Wenn nicht, müssen Sie es ein wenig nacharbeiten.

Answer 2

Sie können einfach die formControl s in der übergeordneten formGroup auf Cancel-Taste "zurücksetzen" klicken, wenn das für Sie in Ordnung ist.

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