File
projects/congarevenuecloud/elements/src/lib/address/address.component.ts
Description
The Address component allows users to enter address details. The details include street name, city name, country code, state code and zip code. When attempting to add or update an address linked to their account, individuals can input details such as street, city name, and zip code into the designated text boxes.
Preview
Usage
Example :import { AddressModule } from '@congarevenuecloud/elements';
@NgModule({
imports: [AddressModule, ...]
})
export class AppModule {}```typescript
<apt-address
[(ngModel)]="contact"
[readonly]="readonly"
[type]="Shipping"
[form]="form"
></apt-address>
Implements
ControlValueAccessor
OnInit
Metadata
| providers |
{
provide: NG_VALUE_ACCESSOR, useExisting: AddressComponent, multi: true
}
|
| selector | apt-address |
| styleUrls | ./address.component.scss |
| templateUrl | ./address.component.html |
| viewProviders |
|
Index
Methods |
Inputs |
Outputs |
Accessors |
Constructor
constructor(accountLocationService: AccountLocationService, contactService: ContactService, accountService: AccountService, aobjectService: AObjectService, translateService: TranslateService)
|
||||||||||||||||||||||||
|
Constructor for Address Component for injecting dependencies.
Parameters :
|
Inputs
| form |
Type : NgForm
|
Default value : new NgForm(null, null)
|
|
NgForm object to bind data to. |
| label |
Type : string
|
|
Set the label as either billing address or shipping address. |
| layout |
Type : "Block" | "Inline"
|
Default value : 'Block'
|
|
Set the layout for the displayed label and value. |
| readonly |
Type : boolean
|
Default value : false
|
|
Flag to set this form as read only or as an editable form. |
| type |
Type : "Billing" | "Shipping"
|
Default value : 'Billing'
|
|
Set the address as either billing or shipping. |
| value |
Type : AccountLocation | Account | Contact | Address
|
|
Value is setter method to set the user's address details. |
Outputs
| addressChange |
Type : EventEmitter<boolean>
|
|
Event emitter is fired on change of address. |
Methods
| onAddressChange |
onAddressChange()
|
|
The method fires the event emitter indicating a change in address. Emits a boolean value through the addressChange subject.
Returns :
void
|
Accessors
| value | ||||||
setvalue(record: AccountLocation | Account | Contact | Address)
|
||||||
|
Value is setter method to set the user's address details.
Parameters :
Returns :
void
|
<div *ngIf="record; else norecord">
<ng-container *ngIf="!readonly; else read">
<div class="mb-3">
<label [for]="getId('street')">{{ 'ADDRESS.ADDRESS_LINE1' | translate }}</label>
<input type="text" class="form-control" (ngModelChange)="onAddressChange()" [id]="getId('street')"
placeholder="{{ 'ADDRESS.PLACEHOLDER_FOR_ADDRESS_LINE1' | translate }}" required [(ngModel)]="record[street]"
name="street" #address="ngModel"
[ngClass]="{ 'is-invalid': address.invalid && (address.touched || address.dirty || form.submitted) }">
<div class="invalid-feedback">
{{ 'ADDRESS.INVALID_SHIPPING' | translate }}
</div>
</div>
<div class="mb-3">
<label [for]="getId('city')">{{cityLabel$ | async}}</label>
<input type="text" class="form-control" [id]="getId('city')"(ngModelChange)="onAddressChange()" placeholder="{{ 'ADDRESS.CITY' | translate }}"
required [(ngModel)]="record[city]" name="city" #cityTemplate="ngModel"
[ngClass]="{ 'is-invalid': cityTemplate.invalid && (cityTemplate.touched || cityTemplate.dirty || form.submitted) }">
<div class="invalid-feedback">
{{ 'ADDRESS.INVALID_CITY' | translate }}
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3" *ngIf="(countryDetails$ | async) as countryDetails">
<label for="getId('country')">{{countryDetails?.DisplayName}}</label>
<select class="custom-select" [class.custom-select-sm]="size === 'sm'" [(ngModel)]="record[countryCode]"
name="value" (ngModelChange)="countryStateChange($event)" [class.custom-select-lg]="size === 'lg'">
<option [value]="">{{'DEPENDENT_PICKLIST.CHOOSE' | translate}}...</option>
<option *ngFor="let picklist of countryDetails?.picklistValues" [value]="picklist.Value">
{{picklist.DisplayText}}</option>
</select>
</div>
<div class="col-md-6 mb-3" *ngIf="(countryDetails$ | async) as countryDetails">
<label [for]="getId('city')">{{stateLabel$ | async}}</label>
<input type="text" class="form-control" [id]="getId('state')" (ngModelChange)="onAddressChange()" placeholder="{{ 'ADDRESS.STATE' | translate }}"
required [(ngModel)]="record[state]" name="state" #stateTemplate="ngModel"
[ngClass]="{ 'is-invalid': stateTemplate.invalid && (stateTemplate.touched || stateTemplate.dirty || form.submitted) }">
<div class="invalid-feedback">
{{ 'ADDRESS.INVALID_STATE' | translate }}
</div>
</div>
<div class="col-md-3 mb-3">
<label [for]="getId('zip')">{{postalCodeLabel$ | async}}</label>
<input type="text" class="form-control" [id]="getId('zip')" (ngModelChange)="onAddressChange()" required [(ngModel)]="record[postalCode]"
name="postal-code" #zipcode="ngModel"
[ngClass]="{ 'is-invalid': zipcode.invalid && (zipcode.touched || zipcode.dirty || form.submitted) }">
<div class="invalid-feedback">
{{ 'ADDRESS.INVALID_ZIP' | translate }}
</div>
</div>
</div>
</ng-container>
<ng-template #read>
<div [class.inline]="layout === 'inline'">
<label class="mutedLabels mt-2" [class.pr-3]="layout === 'inline'" *ngIf="label"> {{label}} </label>
<address class="mb-0" [class.ml-1]="layout === 'inline'" [class.ml-3]="layout === 'inline' && type ==='Billing'"
[class.pl-5]="layout === 'inline'">
{{record[street]}}
<br> {{record[city]}}, {{record[state]}} {{record[postalCode]}}
<br> {{record[country]}}
</address>
</div>
</ng-template>
</div>
<ng-template #norecord>
<div [class.inline]="layout === 'inline'">
<label class="font-weight-bold" [class.pr-3]="layout === 'inline'" *ngIf="label"> {{label}} </label>
</div>
</ng-template>
./address.component.scss
.inline {
display: flex;
label {
white-space: nowrap;
&::after {
content: ":";
margin: 0 2px 0 0;
}
}
}
address.mb-0{
font-size: 0.875rem;
line-height: 1.25rem;
color: #072034;
}
Legend
Html element
Component
Html element with directive