Validations

1) app.module.ts

import { StudentRegComponent } from './student-reg.component';
import { StudentService } from './student.service';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
@NgModule({
    imports: [BrowserModule,FormsModule],
    declarations: [AppComponent,StudentRegComponent],
    providers: [],
    bootstrap:[AppComponent]
})
export class AppModule { }

2) app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app',
    templateUrl: 'app.component.html'
})

export class AppComponent implements OnInit {
    constructor() { }

    ngOnInit() { }
}

3) app.component.html

<h1>Student Reg</h1>
<student-reg></student-reg>

4) student-reg.component.html

<form #studentForm="ngForm">

    Id <input type="text" minlength="3" min="999" name="id" #idCtrl="ngModel" [(ngModel)]="student.id"/>

    <span *ngIf="idCtrl.errors&&idCtrl.errors.minlength">
        atleast 3 charcters should enter
    </span>
    <span *ngIf="idCtrl.errors&&idCtrl.errors.min">
       maximum value is 999
    </span>
    <br/>

    Name <input type="text" name="name" #nameCtrl="ngModel" [(ngModel)]="student.name"/><br/>

    <button (click)="register();" [disabled]="studentForm.invalid">Register</button>
</form>

5)student.ts

export class Student{
    id:number;
    name:string;
}

6)student-reg.component.ts

import { StudentService } from './student.service';
import { Student } from './student';
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'student-reg',
    templateUrl: 'student-reg.component.html'
})

export class StudentRegComponent implements OnInit {
    student:Student;
    constructor() { }
    ngOnInit() {
        this.student = new Student();
     }
    register(){
        console.log(this.student);
    }
}