CODEWITHSUNDEEP
angularangular-validation
AlexB
AlexB

Reputation: 4528

Reactive Forms - skip validation on Cancel

I have a reactive form which has Cancel and Submit buttons:

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

and now if I click on a Submit (Store) button validation kicks in - all good. But if I click on Cancel it also trigger validation. I wonder why? I don't need any validation on Cancel. What do I need to do to turn it off?

Upvotes: 9

Views: 7721

Answers (3)

Boris
Boris

Reputation: 481

It works with event.preventDefault()

<button (click)="cancel($event)">Cancel</button>

cancel(event) {
    event.preventDefault()
}

Upvotes: 1

joshrathke
joshrathke

Reputation: 7774

I would re-initialize the FormGroup when the Cancel button is clicked. This would completely wipe the form and force all of the input states to be prestine again. You should be using input states to verify whether they have been used or not if you aren't already. It will prevent validation from running on a form input that hasn't been used yet.

Component

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

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

Input

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

Button

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

P.S. it looks like you are using Semantic UI, so my HTML is formatted accordingly. If not you'll need to rework it a little.

Upvotes: 0

amal
amal

Reputation: 3170

You can simply 'reset' the formControls in the parent formGroupon cancel button click if that is okay for you.

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

Upvotes: 1

Related Questions