File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| host |
{
} |
| selector |
cx-reset-password |
| templateUrl |
./reset-password.component.html |
Methods
|
onSubmit
|
onSubmit(token: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| token |
string
|
No
|
|
|
form
|
Type : FormGroup
|
Default value : this.service.form
|
|
|
|
isUpdating$
|
Default value : this.service.isUpdating$
|
|
|
|
token$
|
Type : Observable<string>
|
Default value : this.service.resetToken$
|
|
|
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Observable } from 'rxjs';
import { ResetPasswordComponentService } from './reset-password-component.service';
@Component({
selector: 'cx-reset-password',
templateUrl: './reset-password.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
host: { class: 'user-form' },
})
export class ResetPasswordComponent {
form: FormGroup = this.service.form;
isUpdating$ = this.service.isUpdating$;
token$: Observable<string> = this.service.resetToken$;
constructor(protected service: ResetPasswordComponentService) {}
onSubmit(token: string) {
this.service.resetPassword(token);
}
}
<cx-spinner class="overlay" *ngIf="isUpdating$ | async"> </cx-spinner>
<form
*ngIf="token$ | async as token"
(ngSubmit)="onSubmit(token)"
[formGroup]="form"
>
<label>
<span class="label-content">{{
'register.newPassword' | cxTranslate
}}</span>
<input
aria-required="true"
class="form-control"
type="password"
placeholder="{{ 'register.password.placeholder' | cxTranslate }}"
formControlName="password"
/>
<cx-form-errors
aria-live="assertive"
aria-atomic="true"
[control]="form.get('password')"
></cx-form-errors>
</label>
<label>
<span class="label-content">{{
'register.passwordMinRequirements' | cxTranslate
}}</span>
<input
aria-required="true"
class="form-control"
type="password"
placeholder="{{ 'register.confirmPassword.placeholder' | cxTranslate }}"
formControlName="passwordConfirm"
/>
<cx-form-errors
aria-live="assertive"
aria-atomic="true"
[control]="form.get('passwordConfirm')"
></cx-form-errors>
</label>
<button class="btn btn-block btn-primary" [disabled]="form.disabled">
{{ 'register.resetPassword' | cxTranslate }}
</button>
</form>
Legend
Html element with directive