File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| host |
{
} |
| selector |
cx-update-profile |
| templateUrl |
./update-profile.component.html |
|
form
|
Type : FormGroup
|
Default value : this.service.form
|
|
|
|
isUpdating$
|
Default value : this.service.isUpdating$
|
|
|
|
titles$
|
Type : Observable<Title[]>
|
Default value : this.service.titles$
|
|
|
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Title } from '@spartacus/user/profile/root';
import { Observable } from 'rxjs';
import { UpdateProfileComponentService } from './update-profile-component.service';
@Component({
selector: 'cx-update-profile',
templateUrl: './update-profile.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
host: { class: 'user-form' },
})
export class UpdateProfileComponent {
constructor(protected service: UpdateProfileComponentService) {}
form: FormGroup = this.service.form;
isUpdating$ = this.service.isUpdating$;
titles$: Observable<Title[]> = this.service.titles$;
onSubmit(): void {
this.service.updateProfile();
}
}
<cx-spinner class="overlay" *ngIf="isUpdating$ | async"> </cx-spinner>
<form (ngSubmit)="onSubmit()" [formGroup]="form">
<label>
<span class="label-content">{{
'updateProfileForm.title' | cxTranslate
}}</span>
<select formControlName="titleCode" class="form-control">
<option value="">{{ 'updateProfileForm.none' | cxTranslate }}</option>
<option *ngFor="let title of titles$ | async" [value]="title.code">
{{ title.name }}
</option>
</select>
</label>
<label>
<span class="label-content">{{
'updateProfileForm.firstName.label' | cxTranslate
}}</span>
<input
aria-required="true"
type="text"
class="form-control"
name="firstName"
placeholder="{{
'updateProfileForm.firstName.placeholder' | cxTranslate
}}"
formControlName="firstName"
/>
<cx-form-errors
aria-live="assertive"
aria-atomic="true"
[control]="form.get('firstName')"
></cx-form-errors>
</label>
<label>
<span class="label-content">{{
'updateProfileForm.lastName.label' | cxTranslate
}}</span>
<input
aria-required="true"
type="text"
class="form-control"
name="lastName"
placeholder="{{ 'updateProfileForm.lastName.placeholder' | cxTranslate }}"
formControlName="lastName"
/>
<cx-form-errors
aria-live="assertive"
aria-atomic="true"
[control]="form.get('lastName')"
></cx-form-errors>
</label>
<label>
<span class="label-content">{{
'updateProfileForm.customerId' | cxTranslate
}}</span>
<input
aria-required="true"
type="text"
class="form-control"
name="customerId"
formControlName="customerId"
readonly
/>
<cx-form-errors
aria-live="assertive"
aria-atomic="true"
[control]="form.get('lastName')"
></cx-form-errors>
</label>
<a
class="btn btn-block btn-secondary"
[routerLink]="{ cxRoute: 'home' } | cxUrl"
>
{{ 'common.cancel' | cxTranslate }}
</a>
<button class="btn btn-block btn-primary" [disabled]="form.disabled">
{{ 'common.save' | cxTranslate }}
</button>
</form>
Legend
Html element with directive