File
Implements
Metadata
| selector |
cx-csagent-login-form |
| templateUrl |
./csagent-login-form.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
|
csAgentTokenLoading
|
Type : boolean
|
Default value : false
|
|
|
|
csAgentTokenLoading
|
Default value : false
|
Decorators :
@Input()
|
|
|
|
submitEvent
|
Default value : new EventEmitter<{ userId: string; password: string }>()
|
Decorators :
@Output()
|
|
|
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'cx-csagent-login-form',
templateUrl: './csagent-login-form.component.html',
})
export class CSAgentLoginFormComponent implements OnInit {
csAgentLoginForm: FormGroup;
@Input()
csAgentTokenLoading = false;
@Output()
submitEvent = new EventEmitter<{ userId: string; password: string }>();
constructor(protected fb: FormBuilder) {}
ngOnInit(): void {
this.csAgentLoginForm = this.fb.group({
userId: ['', [Validators.required]],
password: ['', [Validators.required]],
});
}
onSubmit(): void {
if (this.csAgentLoginForm.valid) {
this.submitEvent.emit({
userId: this.csAgentLoginForm.get('userId')?.value,
password: this.csAgentLoginForm.get('password')?.value,
});
} else {
this.csAgentLoginForm.markAllAsTouched();
}
}
}
<form
(ngSubmit)="onSubmit()"
[formGroup]="csAgentLoginForm"
*ngIf="!csAgentTokenLoading"
>
<label>
<input
aria-required="true"
type="text"
formControlName="userId"
placeholder="{{ 'asm.loginForm.userId.label' | cxTranslate }}"
/>
<cx-form-errors
aria-live="assertive"
aria-atomic="true"
[control]="csAgentLoginForm.get('userId')"
></cx-form-errors>
</label>
<label>
<input
aria-required="true"
type="password"
placeholder="{{ 'asm.loginForm.password.label' | cxTranslate }}"
formControlName="password"
/>
<cx-form-errors
aria-live="assertive"
aria-atomic="true"
[control]="csAgentLoginForm.get('password')"
></cx-form-errors>
</label>
<button type="submit">
{{ 'asm.loginForm.submit' | cxTranslate }}
</button>
</form>
<div
*ngIf="csAgentTokenLoading"
class="spinner"
aria-hidden="false"
[attr.aria-label]="'common.loading' | cxTranslate"
>
<div></div>
<div></div>
<div></div>
</div>
Legend
Html element with directive