File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
cx-login-form |
| templateUrl |
./login-form.component.html |
Index
Properties
|
|
|
Methods
|
|
|
HostBindings
|
|
|
HostBindings
|
class.user-form
|
Type : boolean
|
Default value : true
|
|
|
|
form
|
Type : FormGroup
|
Default value : this.service.form
|
|
|
|
isUpdating$
|
Default value : this.service.isUpdating$
|
|
|
|
style
|
Default value : true
|
Decorators :
@HostBinding('class.user-form')
|
|
|
import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { LoginFormComponentService } from './login-form-component.service';
@Component({
selector: 'cx-login-form',
templateUrl: './login-form.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LoginFormComponent {
constructor(protected service: LoginFormComponentService) {}
form: FormGroup = this.service.form;
isUpdating$ = this.service.isUpdating$;
@HostBinding('class.user-form') style = true;
onSubmit(): void {
this.service.login();
}
}
<cx-spinner class="overlay" *ngIf="isUpdating$ | async"> </cx-spinner>
<form (ngSubmit)="onSubmit()" [formGroup]="form">
<label>
<span class="label-content">{{
'loginForm.emailAddress.label' | cxTranslate
}}</span>
<input
aria-required="true"
type="email"
class="form-control"
formControlName="userId"
placeholder="{{ 'loginForm.emailAddress.placeholder' | cxTranslate }}"
/>
<cx-form-errors
aria-live="assertive"
aria-atomic="true"
[control]="form.get('userId')"
></cx-form-errors>
</label>
<label>
<span class="label-content">{{
'loginForm.password.label' | cxTranslate
}}</span>
<input
aria-required="true"
type="password"
class="form-control"
placeholder="{{ 'loginForm.password.placeholder' | cxTranslate }}"
formControlName="password"
/>
<cx-form-errors
aria-live="assertive"
aria-atomic="true"
[control]="form.get('password')"
></cx-form-errors>
</label>
<a [routerLink]="{ cxRoute: 'forgotPassword' } | cxUrl" class="btn-link">
{{ 'loginForm.forgotPassword' | cxTranslate }}
</a>
<button
type="submit"
class="btn btn-block btn-primary"
[disabled]="form.disabled"
>
{{ 'loginForm.signIn' | cxTranslate }}
</button>
</form>
Legend
Html element with directive