71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
|
import { Component, OnInit, OnChanges, Input, Output, EventEmitter } from '@angular/core';
|
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
|
|
|
import { Login } from './login';
|
|
|
|
@Component({
|
|
selector: 'login-form',
|
|
exportAs: 'loginForm',
|
|
template: `
|
|
<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"
|
|
[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 class="form-group row">
|
|
<label for="password" class="col-sm-4 control-label">Mot de passe</label>
|
|
|
|
<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 password is required.</p>
|
|
</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');
|
|
}
|
|
}
|