Hi, i’m new to ionic and trying to validate if a user has entered the correct number. I have structured it in a form. They are asked to remember a number, if it is correct they should be shown a message to say if its correct or not.
Ive followed a tutorial video to get this far but Im unable to check if its a number as the tutorial checked it the field was empty.
thanks in advance.
test.html
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Memory Test</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click)="NumberTechniques()">Memory Techniques</button>
<p> Are you able to remember phone numbers?</p>
<p>Try to memorise the following number:</p>
<button ion-button (click)="show_input()" >Show/Hide number</button>
<div *ngIf="show">
<h5> 19161945</h5>
</div>
<div>
<p> Enter the phone number you memorised:</p>
</div>
<form [formGroup]="formgroup">
<ion-list>
<ion-item>
<ion-label floating>
First Number
</ion-label>
<ion-input type="text" formControlName="memnumber" ></ion-input>
</ion-item>
<ion-item *ngIf="memnumber != '19161945'" >
<p>Number is correct</p>
</ion-item>
<button clear ion-button>Check</button>
</ion-list>
</form>
test.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Answer } from "../../models/answer";
import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';
import { Test1Page } from '../test1/test1';
@IonicPage()
@Component({
selector: 'page-test',
templateUrl: 'test.html',
})
export class TestPage {
answer = {} as Answer;
formgroup:FormGroup;
memnumber:AbstractControl;
phonenumber:AbstractControl;
constructor(public navCtrl: NavController, public navParams: NavParams, public formbuilder:FormBuilder) {
this.formgroup = formbuilder.group({
memnumber:[ '',Validators.required],
phonenumber:[ '',Validators.required]
});
this.memnumber = this.formgroup.controls['memnumber'];
this.phonenumber = this.formgroup.controls['phonenumber'];
}
NumberTechniques()
{
this.navCtrl.push(Test1Page);
}
show_input() {
//this.show = true;
if(this.show == true){
this.show = false;
}
else
{
this.show = true;
}
}
show_input1() {
//this.show = true;
if(this.show1 == true){
this.show1 = false;
}
else
{
this.show1 = true;
}
}
ionViewDidLoad() {
console.log('ionViewDidLoad TestPage');
}
}