File
Implements
Metadata
| selector |
cx-guest-register-form |
| templateUrl |
./guest-register-form.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Methods
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
email
|
Type : string
|
Decorators :
@Input()
|
|
|
|
guestRegisterForm
|
Type : FormGroup
|
Default value : this.fb.group(
{
password: [
'',
[Validators.required, CustomFormValidators.passwordValidator],
],
passwordconf: ['', Validators.required],
},
{
validators: CustomFormValidators.passwordsMustMatch(
'password',
'passwordconf'
),
}
)
|
|
|
|
guid
|
Type : string
|
Decorators :
@Input()
|
|
|
|
subscription
|
Type : Subscription
|
|
|
import { Component, Input, OnDestroy } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AuthService, RoutingService } from '@spartacus/core';
import { CustomFormValidators } from '@spartacus/storefront';
import { UserRegisterFacade } from '@spartacus/user/profile/root';
import { Subscription } from 'rxjs';
@Component({
selector: 'cx-guest-register-form',
templateUrl: './guest-register-form.component.html',
})
export class GuestRegisterFormComponent implements OnDestroy {
@Input() guid: string;
@Input() email: string;
subscription: Subscription;
guestRegisterForm: FormGroup = this.fb.group(
{
password: [
'',
[Validators.required, CustomFormValidators.passwordValidator],
],
passwordconf: ['', Validators.required],
},
{
validators: CustomFormValidators.passwordsMustMatch(
'password',
'passwordconf'
),
}
);
constructor(
protected userRegisterFacade: UserRegisterFacade,
protected routingService: RoutingService,
protected authService: AuthService,
protected fb: FormBuilder
) {}
submit() {
if (this.guestRegisterForm.valid) {
this.userRegisterFacade.registerGuest(
this.guid,
this.guestRegisterForm.value.password
);
if (!this.subscription) {
this.subscription = this.authService
.isUserLoggedIn()
.subscribe((isLoggedIn) => {
if (isLoggedIn) {
this.routingService.go({ cxRoute: 'home' });
}
});
}
} else {
this.guestRegisterForm.markAllAsTouched();
}
}
ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
}
<div class="register-guest">
<div class="col-md-6 col-lg-4">
<h3>{{ 'checkoutOrderConfirmation.createAccount' | cxTranslate }}</h3>
<p>
{{
'checkoutOrderConfirmation.createAccountForNext'
| cxTranslate: { email: email }
}}
</p>
<form (ngSubmit)="submit()" [formGroup]="guestRegisterForm">
<div class="form-group">
<label>
<span class="label-content">{{
'register.password.label' | cxTranslate
}}</span>
<input
aria-required="true"
class="form-control"
type="password"
name="password"
placeholder="{{ 'register.password.placeholder' | cxTranslate }}"
formControlName="password"
/>
<cx-form-errors
aria-live="assertive"
aria-atomic="true"
[control]="guestRegisterForm.get('password')"
></cx-form-errors>
</label>
</div>
<div class="form-group">
<label>
<span class="label-content">{{
'register.confirmPassword.label' | cxTranslate
}}</span>
<input
aria-required="true"
class="form-control"
type="password"
name="passwordconf"
placeholder="{{
'register.confirmPassword.placeholder' | cxTranslate
}}"
formControlName="passwordconf"
/>
<cx-form-errors
aria-live="assertive"
aria-atomic="true"
[control]="guestRegisterForm.get('passwordconf')"
></cx-form-errors>
</label>
</div>
<button type="submit" class="btn btn-block btn-primary">
{{ 'common.submit' | cxTranslate }}
</button>
</form>
</div>
</div>
Legend
Html element with directive