Enable a button if all inputs are filled

Ionic Framework ionic-v3
1

Hi
I want to enable buttons only if are inputs are filled…
Any idea how to proceed ?

2

html file

<ion-header>
  <ion-navbar>
    <ion-title>Input demo</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div [formGroup]="someForm">
    <ion-item>
      <ion-label floating>Input 1</ion-label>
      <ion-input formControlName="input1"></ion-input>    
    </ion-item>
    
    <ion-item>
      <ion-label floating>Input 2</ion-label>
      <ion-input formControlName="input2"></ion-input>    
    </ion-item>
    
    <ion-item>
      <ion-label floating>Input 3</ion-label>
      <ion-input formControlName="input3"></ion-input>    
    </ion-item>
    
    <ion-item>
      <ion-label floating>Input 4</ion-label>
      <ion-input formControlName="input4"></ion-input>    
    </ion-item>
  
  <button ion-button [disabled]="!someForm.valid">Some button</button>
</div>
</ion-content>

ts file

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'page-demo',
  templateUrl: 'demo.html'
})

export class DemoPage{
  someForm: FormGroup;
  constructor(public navController: NavController, public formBuilder: FormBuilder) { 
    this.someForm = formBuilder.group({
      'input1': ['', Validators.compose([Validators.required])],
      'input2': ['', Validators.compose([Validators.required])],
      'input3': ['', Validators.compose([Validators.required])],
      'input4': ['', Validators.compose([Validators.required])],
    });
  }

}
1 Like
3

What should be between ‘’ ?
‘input1’: [‘HERE’, Validators.compose([Validators.required])],

4

You can keep it as it is. empty.

1 Like