File
Implements
Metadata
selector |
ab-login-form |
template |
<div *ngIf="!authenticated">
<h2>FIXME: ab-login-form</h2>
<ng-content></ng-content>
<form [formGroup]="loginForm" (ngSubmit)="submitForm(loginForm.value)">
<div class="form-group"
[ngClass]="{'has-error':!loginForm.controls['name'].valid && loginForm.controls['name'].touched}">
<label>{{ nameLabel }}</label>
<input name="name" class="form-control" type="text" required placeholder="{{ namePlaceholder }}"
[formControl]="loginForm.controls['name']">
<div *ngIf="loginForm.controls['name'].hasError('pattern') && loginForm.controls['name'].touched"
class="form-error">{{ nameError }}.
</div>
</div>
<div class="form-group"
[ngClass]="{'has-error':!loginForm.controls['password'].valid && loginForm.controls['password'].touched}">
<label>{{ passwordLabel }}</label>
<input name="password" class="form-control" type="password" required placeholder="{{ passwordPlaceholder }}"
[formControl]="loginForm.controls['password']">
<div *ngIf="loginForm.controls['password'].hasError('pattern') && loginForm.controls['password'].touched"
class="form-error">{{ passwordError }}.
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" [disabled]="!loginForm.valid">{{ submitLabel }}
</button>
<div *ngIf="submitError !== ''"
class="form-error">{{ submitError }}.
</div>
</div>
</form>
</div>
|
Index
Properties
|
|
Methods
|
|
Inputs
|
|
Outputs
|
|
nameError
|
Default value: 'NAME ERROR'
|
|
nameLabel
|
Default value: 'NAME'
|
|
namePlaceholder
|
Default value: ''
|
|
nameRegex
|
Default value: /[0-9a-zA-Z]{1,}/
|
|
passwordError
|
Default value: 'PASSWORD REQUIRED'
|
|
passwordLabel
|
Default value: 'PASSWORD'
|
|
passwordPlaceholder
|
Default value: ''
|
|
passwordRegex
|
Default value: /[0-9a-zA-Z]{1,}/
|
|
submitError
|
Default value: ''
|
|
submitLabel
|
Default value: 'SUBMIT'
|
|
translateService
|
Type: any
|
|
Methods
ngOnChanges
|
ngOnChanges(changes: )
|
|
|
submitForm
|
submitForm(form: any)
|
|
Parameters :
Name |
Type |
Optional |
form |
any
|
no
|
|
translateForm
|
translateForm()
|
|
|
labels
|
labels: []
|
Type : []
|
Default value : ['nameLabel','passwordLabel','submitLabel','submitError','passwordError','nameError','namePlaceholder','passwordPlaceholder']
|
|
import {Component, EventEmitter, OnInit, OnChanges, Input, Output} from '@angular/core';
import {FormGroup, FormBuilder, Validators} from '@angular/forms';
@Component({
selector: 'ab-login-form',
template: `
<div *ngIf="!authenticated">
<h2>FIXME: ab-login-form</h2>
<ng-content></ng-content>
<form [formGroup]="loginForm" (ngSubmit)="submitForm(loginForm.value)">
<div class="form-group"
[ngClass]="{'has-error':!loginForm.controls['name'].valid && loginForm.controls['name'].touched}">
<label>{{ nameLabel }}</label>
<input name="name" class="form-control" type="text" required placeholder="{{ namePlaceholder }}"
[formControl]="loginForm.controls['name']">
<div *ngIf="loginForm.controls['name'].hasError('pattern') && loginForm.controls['name'].touched"
class="form-error">{{ nameError }}.
</div>
</div>
<div class="form-group"
[ngClass]="{'has-error':!loginForm.controls['password'].valid && loginForm.controls['password'].touched}">
<label>{{ passwordLabel }}</label>
<input name="password" class="form-control" type="password" required placeholder="{{ passwordPlaceholder }}"
[formControl]="loginForm.controls['password']">
<div *ngIf="loginForm.controls['password'].hasError('pattern') && loginForm.controls['password'].touched"
class="form-error">{{ passwordError }}.
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" [disabled]="!loginForm.valid">{{ submitLabel }}
</button>
<div *ngIf="submitError !== ''"
class="form-error">{{ submitError }}.
</div>
</div>
</form>
</div>
`
})
export class LoginFormComponent implements OnInit, OnChanges {
@Input() translateService: any;
// @Input() nameRegex;
@Input() nameRegex = /[0-9a-zA-Z]{1,}/;
// @Input() passwordRegex;
@Input() passwordRegex = /[0-9a-zA-Z]{1,}/;
@Input() nameLabel = 'NAME';
@Input() passwordLabel = 'PASSWORD';
@Input() submitLabel = 'SUBMIT';
@Input() submitError = '';
@Input() passwordError = 'PASSWORD REQUIRED';
@Input() nameError = 'NAME ERROR';
@Input() namePlaceholder = '';
@Input() passwordPlaceholder = '';
@Output() login: EventEmitter<any> = new EventEmitter();
loginForm: FormGroup;
authenticated: boolean;
submitted: boolean;
labels = ['nameLabel','passwordLabel','submitLabel','submitError','passwordError','nameError','namePlaceholder','passwordPlaceholder'];
constructor(public fb: FormBuilder) { }
ngOnInit() {
// let nameValidators = [Validators.required];
// let passwordValidators = [Validators.required];
// if(this.nameRegex) {
// nameValidators.push(Validators.pattern(this.nameRegex));
// }
// if(this.passwordRegex) {
// passwordValidators.push(Validators.pattern(this.passwordRegex));
// }
this.loginForm = this.fb.group({
'name': [null, Validators.pattern(this.nameRegex)],
'password': [null, Validators.pattern(this.passwordRegex)],
});
this.translateForm();
}
ngOnChanges(changes) {
this.translateForm();
}
submitForm(form: any) {
this.submitted = true;
this.login.emit(form);
}
translateForm() {
if (this.translateService) {
this.labels.forEach((label) => {
if(this[label] && this[label] !== ''){
this[label] = this.translateService.instant(this[label]);
}
});
}
}
// logout() {
// localStorage.removeItem('jwt');
// localStorage.removeItem('profile');
// this.authenticated = false;
// }
}
Legend
Html element with directive