Quantcast
Channel: Ionic Forum - Latest posts
Viewing all articles
Browse latest Browse all 230058

Enable a button if all inputs are filled

$
0
0

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])],
    });
  }

}

Viewing all articles
Browse latest Browse all 230058

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>