diff --git a/src/login/login.module.ts b/src/login/login.module.ts index 29c634b..9657e21 100644 --- a/src/login/login.module.ts +++ b/src/login/login.module.ts @@ -1,7 +1,8 @@ // vim: set tw=80 ts=2 sw=2 sts=2 : import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; +import { CommonModule } from '@angular/common'; +import { ReactiveFormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { HTTP_INTERCEPTORS } from '@angular/common/http'; @@ -15,7 +16,8 @@ import { LoginModalComponent } from './loginModal.component'; @NgModule({ imports: [ HttpClientModule, - FormsModule, + CommonModule, + ReactiveFormsModule, NgLoggerModule, ], providers: [ diff --git a/src/login/loginForm.component.ts b/src/login/loginForm.component.ts index e87a4db..3ba30aa 100644 --- a/src/login/loginForm.component.ts +++ b/src/login/loginForm.component.ts @@ -1,33 +1,70 @@ // vim: set tw=80 ts=2 sw=2 sts=2 : - -import { Component, Input } from '@angular/core'; -import { NgForm } from '@angular/forms'; +import { Component, OnInit, OnChanges, Input, Output, EventEmitter } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { Login } from './login'; @Component({ - selector: 'form[login-form]', + selector: 'login-form', + exportAs: 'loginForm', template: ` -
- +
+
+ -
- +
+ + +
+

The email is required.

+
+
-
-
- +
+ -
- +
+ + +
+

The email is required.

+
+
-
+ ` }) export class LoginFormComponent { + public form: FormGroup; @Input('login-form') private login: Login + @Output('submit') submitEventEmitter: EventEmitter = new EventEmitter(); + + constructor(private formBuilder : FormBuilder) {} + + ngOnInit() { + this.form = this.formBuilder.group({ + email: ['', Validators.required], + password: ['', Validators.required] + }) + } + + submit() { + if(this.form.valid) { + this.submitEventEmitter.emit(); + } + } + + get email() { + return this.form.get('email'); + } + + get password() { + return this.form.get('password'); + } } diff --git a/src/login/loginModal.component.ts b/src/login/loginModal.component.ts index 7d4650e..8ff7abd 100644 --- a/src/login/loginModal.component.ts +++ b/src/login/loginModal.component.ts @@ -1,10 +1,10 @@ // vim: set tw=80 ts=2 sw=2 sts=2: - -import { Component } from '@angular/core' +import { Component, Input, ViewChild } from '@angular/core'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { Login } from './login'; +import { LoginFormComponent } from './loginForm.component'; @Component({ selector: 'login-modal', @@ -14,13 +14,11 @@ import { Login } from './login';