### File

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

### Implements

`OnInit` `OnChanges`

### Metadata

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

- authenticated
- Public fb
- labels
- loginForm
- submitted

###### Methods

- ngOnChanges
- ngOnInit
- submitForm
- translateForm

###### Inputs

- nameError
- nameLabel
- namePlaceholder
- nameRegex
- passwordError
- passwordLabel
- passwordPlaceholder
- passwordRegex
- submitError
- submitLabel
- translateService

###### Outputs

- login

### Constructor

`constructor(fb: FormBuilder)`
Defined in projects/app-base-library/src/lib/angular/components/login/login-form.component.ts:64

Parameters :

Name | Type | Optional
fb | `FormBuilder` | no

### Inputs

`nameError` | Default value: `'NAME ERROR'`
Defined in projects/app-base-library/src/lib/angular/components/login/login-form.component.ts:56

`nameLabel` | Default value: `'NAME'`
Defined in projects/app-base-library/src/lib/angular/components/login/login-form.component.ts:51

`namePlaceholder` | Default value: `''`
Defined in projects/app-base-library/src/lib/angular/components/login/login-form.component.ts:57

`nameRegex` | Default value: `/[0-9a-zA-Z]{1,}/`
Defined in projects/app-base-library/src/lib/angular/components/login/login-form.component.ts:48

`passwordError` | Default value: `'PASSWORD REQUIRED'`
Defined in projects/app-base-library/src/lib/angular/components/login/login-form.component.ts:55

`passwordLabel` | Default value: `'PASSWORD'`
Defined in projects/app-base-library/src/lib/angular/components/login/login-form.component.ts:52

`passwordPlaceholder` | Default value: `''`
Defined in projects/app-base-library/src/lib/angular/components/login/login-form.component.ts:58

`passwordRegex` | Default value: `/[0-9a-zA-Z]{1,}/`
Defined in projects/app-base-library/src/lib/angular/components/login/login-form.component.ts:50

`submitError` | Default value: `''`
Defined in projects/app-base-library/src/lib/angular/components/login/login-form.component.ts:54

`submitLabel` | Default value: `'SUBMIT'`
Defined in projects/app-base-library/src/lib/angular/components/login/login-form.component.ts:53

`translateService` | Type: `any`
Defined in projects/app-base-library/src/lib/angular/components/login/login-form.component.ts:46

### Outputs

`login` | `$event` type: `EventEmitter<any>`
Defined in projects/app-base-library/src/lib/angular/components/login/login-form.component.ts:59

### Methods

ngOnChanges
`ngOnChanges(changes: )`
Defined in projects/app-base-library/src/lib/angular/components/login/login-form.component.ts:84

Parameters :

Name | Optional
changes | no

Returns : `void`

ngOnInit
`ngOnInit()`
Defined in projects/app-base-library/src/lib/angular/components/login/login-form.component.ts:68
Returns : `void`

submitForm
`submitForm(form: any)`
Defined in projects/app-base-library/src/lib/angular/components/login/login-form.component.ts:88

Parameters :

Name | Type | Optional
form | `any` | no

Returns : `void`

translateForm
`translateForm()`
Defined in projects/app-base-library/src/lib/angular/components/login/login-form.component.ts:93
Returns : `void`

### Properties

authenticated
`authenticated: `boolean``
Type : `boolean`
Defined in projects/app-base-library/src/lib/angular/components/login/login-form.component.ts:62

Public fb
`fb: `FormBuilder``
Type : `FormBuilder`
Defined in projects/app-base-library/src/lib/angular/components/login/login-form.component.ts:66

labels
`labels: `[]``
Type : `[]`
Default value : `['nameLabel','passwordLabel','submitLabel','submitError','passwordError','nameError','namePlaceholder','passwordPlaceholder']`
Defined in projects/app-base-library/src/lib/angular/components/login/login-form.component.ts:64

loginForm
`loginForm: `FormGroup``
Type : `FormGroup`
Defined in projects/app-base-library/src/lib/angular/components/login/login-form.component.ts:61

submitted
`submitted: `boolean``
Type : `boolean`
Defined in projects/app-base-library/src/lib/angular/components/login/login-form.component.ts:63

    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">

                <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
Component
Html element with directive

# results matching ""

# No results matching ""