Reactive Forms

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 { ReactiveFormsModule } from "@angular/forms";
@NgModule({
    imports: [BrowserModule, ReactiveFormsModule],
    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 {    
}

3) app.component.html

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

4) student-reg.component.html

<form [formGroup]="studentForm">
    Id <input type="text" name="id" formControlName="id"/> <br/>
    Name <input type="text" name="name" formControlName="name"/><br/>
    <button (click)="register();" [disabled]="studentForm.invalid">Register</button>
</form>

5)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 {
    studentForm:FormGroup;
    constructor() { }
    ngOnInit() {
        this.studentForm = new FormGroup({
            id:new FormControl('',[]),
            name:new FormControl('',[])
        });
     }
    register(){
        console.log(this.student);
    }
}

6)student.ts

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