File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| host |
{
} |
| providers |
{
provide: ItemService, useExisting: UnitAddressItemService,
}
|
| selector |
cx-org-unit-address-form |
| templateUrl |
./unit-address-form.component.html |
|
countries$
|
Type : Observable<Country[]>
|
Default value : this.formService.getCountries()
|
|
|
|
form
|
Type : FormGroup
|
Default value : this.itemService.getForm()
|
|
|
|
key$
|
Default value : this.itemService.key$
|
|
|
|
regions$
|
Type : Observable<Region[]>
|
Default value : this.formService.getRegions()
|
|
|
|
titles$
|
Type : Observable<Title[]>
|
Default value : this.formService.getTitles()
|
|
|
|
unit$
|
Type : Observable<B2BUnit>
|
Default value : this.currentUnitService.item$
|
|
|
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Address, B2BUnit, Country, Region, Title } from '@spartacus/core';
import { Observable } from 'rxjs';
import { ItemService } from '../../../../shared/item.service';
import { UnitAddressItemService } from '../services/unit-address-item.service';
import { UnitAddressFormService } from './unit-address-form.service';
import { CurrentUnitService } from '../../../services/current-unit.service';
@Component({
selector: 'cx-org-unit-address-form',
templateUrl: './unit-address-form.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
host: { class: 'content-wrapper' },
providers: [
{
provide: ItemService,
useExisting: UnitAddressItemService,
},
],
})
export class UnitAddressFormComponent implements OnInit {
form: FormGroup = this.itemService.getForm();
key$ = this.itemService.key$;
countries$: Observable<Country[]> = this.formService.getCountries();
titles$: Observable<Title[]> = this.formService.getTitles();
regions$: Observable<Region[]> = this.formService.getRegions();
unit$: Observable<B2BUnit> = this.currentUnitService.item$;
constructor(
protected itemService: ItemService<Address>,
protected formService: UnitAddressFormService,
protected currentUnitService: CurrentUnitService
) {}
ngOnInit(): void {}
}
<cx-org-form
i18nRoot="orgUnitAddress"
[animateBack]="!(key$ | async)"
[subtitle]="
'orgUnitAddress.details.subtitle' | cxTranslate: { item: (unit$ | async) }
"
>
<ng-container *ngIf="form" [formGroup]="form" main>
<label aria-required="true" formGroupName="country">
<span class="label-content required">{{
'orgUnitAddress.country' | cxTranslate
}}</span>
<ng-select
class="country-select"
formControlName="isocode"
[searchable]="true"
[clearable]="false"
[items]="countries$ | async"
bindLabel="name"
bindValue="isocode"
placeholder="{{ 'orgUnitAddress.selectOne' | cxTranslate }}"
appendTo="cx-org-list"
>
</ng-select>
<cx-form-errors [control]="form.get('country.isocode')"></cx-form-errors>
</label>
<label aria-required="true">
<span class="label-content required">{{
'orgUnitAddress.titles' | cxTranslate
}}</span>
<ng-select
formControlName="titleCode"
[searchable]="false"
[clearable]="false"
[items]="titles$ | async"
bindLabel="name"
bindValue="code"
placeholder="{{ 'orgUnitAddress.selectOne' | cxTranslate }}"
appendTo="cx-org-list"
>
</ng-select>
</label>
<label>
<span class="label-content required">{{
'orgUnitAddress.firstName' | cxTranslate
}}</span>
<input
aria-required="true"
class="form-control"
type="text"
placeholder="{{ 'orgUnitAddress.firstName' | cxTranslate }}"
formControlName="firstName"
/>
<cx-form-errors [control]="form.get('firstName')"></cx-form-errors>
</label>
<label>
<span class="label-content required">{{
'orgUnitAddress.lastName' | cxTranslate
}}</span>
<input
aria-required="true"
type="text"
class="form-control"
placeholder="{{ 'orgUnitAddress.lastName' | cxTranslate }}"
formControlName="lastName"
/>
<cx-form-errors [control]="form.get('lastName')"></cx-form-errors>
</label>
<label class="full-width">
<span class="label-content required">{{
'orgUnitAddress.address1' | cxTranslate
}}</span>
<input
aria-required="true"
type="text"
class="form-control"
placeholder="{{ 'orgUnitAddress.streetAddress' | cxTranslate }}"
formControlName="line1"
/>
<cx-form-errors [control]="form.get('line1')"></cx-form-errors>
</label>
<label class="full-width">
<span class="label-content">{{
'orgUnitAddress.address2' | cxTranslate
}}</span>
<input
type="text"
class="form-control"
placeholder="{{ 'orgUnitAddress.aptSuite' | cxTranslate }}"
formControlName="line2"
/>
</label>
<label class="full-width">
<span class="label-content">{{
'orgUnitAddress.phoneNumber' | cxTranslate
}}</span>
<input
type="text"
class="form-control"
placeholder="{{ 'orgUnitAddress.phoneNumber' | cxTranslate }}"
formControlName="phone"
/>
</label>
<label>
<span class="label-content required">{{
'orgUnitAddress.city' | cxTranslate
}}</span>
<input
type="text"
class="form-control"
placeholder="{{ 'orgUnitAddress.city' | cxTranslate }}"
formControlName="town"
/>
<cx-form-errors [control]="form.get('town')"></cx-form-errors>
</label>
<label>
<span class="label-content required">{{
'orgUnitAddress.zipCode' | cxTranslate
}}</span>
<input
aria-required="true"
type="text"
class="form-control"
placeholder="{{ 'orgUnitAddress.zipCode' | cxTranslate }}"
formControlName="postalCode"
/>
<cx-form-errors [control]="form.get('postalCode')"></cx-form-errors>
</label>
<label></label>
<ng-container *ngIf="regions$ | async as regions">
<label
class="full-width"
aria-required="true"
formGroupName="region"
*ngIf="regions.length > 0"
>
<span class="label-content required">{{
'orgUnitAddress.state' | cxTranslate
}}</span>
<ng-select
class="region-select"
formControlName="isocode"
[searchable]="true"
[clearable]="false"
[items]="regions"
bindLabel="name"
bindValue="isocode"
placeholder="{{ 'orgUnitAddress.selectOne' | cxTranslate }}"
appendTo="cx-org-list"
>
</ng-select>
<cx-form-errors [control]="form.get('region.isocode')"></cx-form-errors>
</label>
</ng-container>
</ng-container>
</cx-org-form>
Legend
Html element with directive