Use reactive forms for login modal.
This commit is contained in:
parent
5f413f0cad
commit
49716421a1
@ -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: [
|
||||
|
@ -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: `
|
||||
<div class="form-group">
|
||||
<label for="email" class="col-sm-4 control-label">Adresse email</label>
|
||||
<form novalidate (keyup.enter)="submit()" [formGroup]="form">
|
||||
<div class="form-group row">
|
||||
<label for="email" class="col-sm-4 control-label">Adresse email</label>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" id="email"
|
||||
[(ngModel)]="login.email" placeholder="Nom d'utilisateur">
|
||||
<div class="col-sm-8"
|
||||
[class.has-danger]="email.errors">
|
||||
<input type="text" class="form-control" id="email"
|
||||
formControlName="email" placeholder="Nom d'utilisateur">
|
||||
|
||||
<div class="help-block text-danger" *ngIf="email.errors">
|
||||
<p *ngIf="email.errors.required">The email is required.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password" class="col-sm-4 control-label">Mot de passe</label>
|
||||
<div class="form-group row">
|
||||
<label for="password" class="col-sm-4 control-label">Mot de passe</label>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<input type="password" class="form-control" id="password"
|
||||
[(ngModel)]="login.password" placeholder="Mot de passe">
|
||||
<div class="col-sm-8"
|
||||
[class.has-danger]="password.errors">
|
||||
<input type="password" class="form-control" id="password"
|
||||
formControlName="password" placeholder="Mot de passe">
|
||||
|
||||
<div class="help-block text-danger" *ngIf="password.errors">
|
||||
<p *ngIf="password.errors.required">The email is required.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`
|
||||
})
|
||||
|
||||
export class LoginFormComponent {
|
||||
public form: FormGroup;
|
||||
@Input('login-form') private login: Login
|
||||
@Output('submit') submitEventEmitter: EventEmitter<void> = new EventEmitter<void>();
|
||||
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
@ -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';
|
||||
</div>
|
||||
|
||||
<div class="modal-body" id="modal-body">
|
||||
<form [(login-form)]="login" class="form-horizontal"
|
||||
(ngSubmit)="submit()" #form="ngForm">
|
||||
</form>
|
||||
<login-form (submit)="submit()" #loginForm="loginForm"></login-form>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary" [disabled]="!form.valid" (click)="submit()">
|
||||
<button class="btn btn-primary" [disabled]="!loginForm.form.valid" (click)="submit()">
|
||||
Login
|
||||
</button>
|
||||
|
||||
@ -31,14 +29,20 @@ import { Login } from './login';
|
||||
`
|
||||
})
|
||||
export class LoginModalComponent {
|
||||
private login: Login = new Login();
|
||||
@ViewChild('loginForm') loginForm: LoginFormComponent;
|
||||
|
||||
constructor(private activeModal: NgbActiveModal) {
|
||||
|
||||
}
|
||||
|
||||
submit(): void {
|
||||
this.activeModal.close(this.login);
|
||||
let formModel = this.loginForm.form.value;
|
||||
let login: Login = new Login();
|
||||
|
||||
login.email = formModel.email;
|
||||
login.password = formModel.password;
|
||||
|
||||
this.activeModal.close(login);
|
||||
}
|
||||
|
||||
cancel(): void {
|
||||
|
Loading…
Reference in New Issue
Block a user