Button validation - Angular 2 Reactive forms

Question

I have used reactive forms in my angular 2 project. I'm trying to do button validation but facing bit confuse. Here my form contains several text fields and buttons. In my form there are two way's to give input. i.e through input textfields and upload spread sheet button.

If we try to give input from text fields, my upload button should disable and If remove data from textfields upload button should enable. How to achieve this functionality.

Sample example: https://stackblitz.com/edit/angular-vnqqcx

you should better use !SignupForm.valid to disable your submit button — Mehdi Benmoha
– Mehdi Benmoha, Commented Feb 4, 2019 at 14:47
@MehdiBenmoha Yeah I've tried already which you suggested, but I don't think so this will work for this particular scenario. — Jayden
– Jayden, Commented Feb 4, 2019 at 17:14

Eliseo · Accepted Answer · 2019-02-04 21:20:51Z

1

You can subscribe to

empty=true;
this.SignupForm.controls.userData.valueChanges.subscribe(res=>{
      this.empty=!res.username && !res.email
    })

Or create a customValidator and check is the group es valid

  this.SignupForm = new FormGroup({
      'userData': new FormGroup({
        'username': new FormControl(null),
        'email': new FormControl(null),
      }, this.userDataValidator())
    });
  userDataValidator() {
    return (group: FormGroup) => {
      return (!group.value.username && !group.value.email) ? null : 
         { error: 'filled' }
    }
  }

or use a getter

  get isEmpty()
  {
    return !this.SignupForm || !this.SignupForm.controls.userData
           || (!this.SignupForm.controls.userData.value.username &&
               !this.SignupForm.controls.userData.value.email)
  }

see stackblitz

edited Feb 4, 2019 at 21:20

answered Feb 4, 2019 at 20:38

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jayden Over a year ago

Thanks for answer, Yes this is working fine but In my case there are nearly fifty text fields in my form. So is this is correct approach for that scenario to check every field empty or not??

Eliseo Over a year ago

In this case, I'll put at first in the form a radio button to allow choose to the user upload the data or fill the data manually, but it's only an idea

Jayden Over a year ago

Ohh Okay..Any how thanks for your ans and your response.

Antoniossss · Accepted Answer · 2019-02-04 15:39:11Z

0

what you want do do is to allow user to submit the form it it is valid. That is what valid/invalid properties of Form are for. So instead

<button class="btn btn-primary" type="submit" [disabled]="SignupForm.dirty" >Submit</button>

use

    <button class="btn btn-primary" type="submit" [disabled]="SignupForm.invalid" >Submit</button>

It works well with data validation.

https://stackblitz.com/edit/angular-cdfj8z?file=src/app/app.component.html

answered Feb 4, 2019 at 15:39

Antoniossss

32.7k7 gold badges67 silver badges119 bronze badges

1 Comment

Jayden Over a year ago

Thanks for your answer, but this is not I am expecting. My scenario is different, I don't want to submit a form. Test fields and button purpose is different here. If we use use textfields then button not required so need to disable. If we remove data then button should enable.

Collectives™ on Stack Overflow

Button validation - Angular 2 Reactive forms

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related