form validation and show error message without ts file - validation

Question

is there any possibility to get error message without ts file, I used this i could validate my input
<form #form="ngForm" (ngSubmit)="logForm(form)" novalidate>
<ion-item>
<ion-label style="color: black;" fixed>User Name</ion-label>
<ion-input type="text" name="username" placeholder="valid user name" [(ngModel)]="username" pattern="[A-Za-z0-9]{3}" required></ion-input>
</ion-item>
<ion-item>
<ion-label style="color: black;" fixed>Email Id</ion-label>
<ion-input type="email" name="email" placeholder="Examples#gmail.com" [(ngModel)]="email"
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$" required></ion-input>
</ion-item>
<button ion-button type="submit" value="Submit" block>Login</button>
</form>
<p *ngIf=username.valid> The following problems have been found with the username: </p>
what i need is to display error message if the input is not valid, and i should not submit empty form
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
#Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class LoginPage {
constructor(public navCtrl: NavController
) {}
ionViewDidLoad() {
console.log('ionViewDidLoad LoginPage');
}
logForm(form) {
console.log(form.value)
if(form.valid) {
console.log(form.value);
/*here i get user entered values as object*/
}
}

Answer 1

You need to add to your form attributes something that will identify what fields we're going to validate, so for username, let's say this:
#userName="ngModel"
You can loose the [(ngModel)] in this case.
and then your validation:
<div *ngIf="userName.errors?.required && userName.touched">
Name is required
</div>
<div *ngIf="userName.errors?.pattern && userName.touched">
Not valid
</div>
So you just use the different validations you have set for input and check whether they match the validations, e.g required, pattern with the prefix of the name of the form control and errors?
So here's how your username validation would look like:
<ion-item>
<ion-label style="color: black;" fixed>User Name</ion-label>
<ion-input type="text" name="username" ngModel #userName="ngModel"
required pattern="[A-Za-z0-9]{3}"></ion-input>
</ion-item>
<div *ngIf="userName.errors?.required && userName.touched">
Name is required
</div>
<div *ngIf="userName.errors?.pattern && userName.touched">
Not valid
</div>
Here's a plunker.