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
@MehdiBenmoha Yeah I've tried already which you suggested, but I don't think so this will work for this particular scenario. — Jayden

Eliseo Eliseo · Accepted Answer · 2019-02-04T20:38:30

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

Button validation - Angular 2 Reactive forms

2 Answers