Hi.
I’m very new to Angular and Ionic and in all honestly coming from jQuery mindset I find it very difficult for now on how to work with things, but I’m sure I will get there.
Following this documentation I have created my first form, with FormBuilder.
My problem is that the submit button never gets enabled.
Here is my html code:
<form [formGroup]="authForm" (ngSubmit)="logForm()">
<ion-item >
<ion-label floating>First Name</ion-label>
<ion-input type="text" value="" formControlName="firstname"></ion-input>
</ion-item>
<ion-item >
<ion-label floating>Surname</ion-label>
<ion-input type="text" value="" formControlName="surname"></ion-input>
</ion-item>
<ion-item >
<ion-label floating>Mobile number</ion-label>
<ion-input type="tel" value="" formControlName="tel"></ion-input>
</ion-item>
<button ion-button block large type="submit" [disabled]="!authForm.valid">Save</button>
</form>
And here is the TS file:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {Validators, FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'firts_run',
templateUrl: 'first_run.html'
})
export class FirstRun {
private authForm : FormGroup;
constructor(private navController: NavController, private fb: FormBuilder) {
this.authForm = this.fb.group({
'firstname': ['', Validators.compose([Validators.required, Validators.minLength(3)])],
'surname': ['', Validators.compose([Validators.required, Validators.minLength(3)])],
'tel': ['', Validators.compose([Validators.required, Validators.minLength(11), Validators.pattern('[0-9]{11}')])]
});
}
logForm(){
console.log(this.authForm.valid);
console.log(this.authForm.value)
}
}
My problem is that the form never gets in a submittable state. I have tried to remove the [disabled]="!authForm.valid"
attribute from the submit button which allowed me to submit the form, by doing that I could check that authForm.valid
returns true when the fields are field in correctly so the validators are working as expected, yet the submit button stays disabled.
I’m very tempted to add javascript to it and manually update the state of the button, but I’m trying to do it the “Angular” way and I’m failing to understand what I’m missing.
Here is my ionic info output:
Cordova CLI: 6.5.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.10.0
Xcode version: Not installed
Thank you for your help and support.