Event after all fields filled

Question

I have 4 inputs and 1 button which is disabled

<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="button" disabled="true">

How I can remove attribute disabled from button after all fields will be filled. Something another events oninput and onchange.

Answer 1

Use the ionic validation

https://ionicframework.com/docs/developer-resources/forms/

Look for this line and its example:

<button ion-button type="submit" [disabled]="!todo.valid">Submit</button>

Answer 2

You can do this by using FormGroups

app.component.html

     <form [formGroup]="mygroup" >

           <input type="text" formControlName="input1">
           <input type="text" formControlName="input2">
           <input type="text" formControlName="input3">
           <input type="text" formControlName="input4">

           <input type="button" disabled="true" type="submit" [disabled]="!mygroup.valid">
        </form>

app.component.ts

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


export class FormsPage {
  private mygroup : FormGroup;

  constructor( private formBuilder: FormBuilder ) {
    this. mygroup = this.formBuilder.group({
      input1: ['', Validators.required],
      input2: ['', Validators.required],
      input3: ['', Validators.required],
      input4: ['', Validators.required],
    });
  }

}