import { Validators } from '@angular/common'; import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; import { Router } from '@angular/router'; import { UserService } from '../shared'; @Component({ selector: 'my-user-add', template: require('./user-add.component.html'), directives: [ REACTIVE_FORM_DIRECTIVES ] }) export class UserAddComponent implements OnInit { userAddForm: FormGroup; error: string = null; username = ''; password = ''; constructor(private router: Router, private userService: UserService) {} ngOnInit() { this.userAddForm = new FormGroup({ username: new FormControl('', [ Validators.required, Validators.minLength(3), Validators.maxLength(20) ]), password: new FormControl('', [ Validators.required, Validators.minLength(6) ]), }); } addUser() { this.error = null; this.userService.addUser(this.username, this.password).subscribe( ok => this.router.navigate([ '/admin/users/list' ]), err => this.error = err ); } }