File

projects/app-base-library/src/lib/angular/components/ab-login-form/ab-login-form.component.ts

Implements

OnInit OnChanges

Metadata

encapsulation ViewEncapsulation.Native
selector ab-login-form
template
<div *ngIf="!authenticated">
    <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

Constructor

constructor(fb: FormBuilder)
Parameters :
Name Type Optional
fb FormBuilder no

Inputs

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

Outputs

login $event type: EventEmitter<any>

Methods

ngOnChanges
ngOnChanges(changes: )
Parameters :
Name Optional
changes no
Returns : void
ngOnInit
ngOnInit()
Returns : void
submitForm
submitForm(form: any)
Parameters :
Name Type Optional
form any no
Returns : void
translateForm
translateForm()
Returns : void

Properties

authenticated
authenticated: boolean
Type : boolean
Public fb
fb: FormBuilder
Type : FormBuilder
labels
labels: []
Type : []
Default value : ['nameLabel', 'passwordLabel', 'submitLabel', 'submitError', 'passwordError', 'nameError', 'namePlaceholder', 'passwordPlaceholder']
loginForm
loginForm: FormGroup
Type : FormGroup
submitted
submitted: boolean
Type : boolean
import {Component, EventEmitter, OnInit, OnChanges, Input, Output, ViewEncapsulation} from '@angular/core';
import {FormGroup, FormBuilder, Validators} from '@angular/forms';

@Component({
    selector: 'ab-login-form',
    encapsulation: ViewEncapsulation.Native,
    template: `
     <div *ngIf="!authenticated">
         <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 AbLoginFormComponent 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]){
                // 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
Component
Html element with directive

results matching ""

    No results matching ""