upp-address

Address input component with integrated Google Maps modal for geocoding, geolocation, and address validation. It implements ControlValueAccessor for reactive form integration and stores a structured MapAddress object (street, number, locality, coordinates, timezone).

The component is composed of three parts:

• UppAddressComponent (upp-address) -- The main form control. Displays the formatted address and opens the picker modal on click.
• UppMdAddressComponent (upp-modal-address) -- The modal dialog. Provides a form with street/number/door/locality fields, a Google Map for visual confirmation, and buttons for geolocation and address validation via the geocode service.
• UppErAddressComponent (upp-er-address) -- A small validation-error display component that shows error messages for address form controls.

Demo

Source Code

HTML

<h2>upp-address</h2>
<p class="demo-description">Delivery address input — shows <code>upp-address</code> with form integration and live value output.</p>

<div class="demo-section" [formGroup]="form">
    <h3>Delivery Address</h3>

    <div class="demo-note">
        <ion-icon name="information-circle-outline"></ion-icon>
        Requires Google Maps API key for autocomplete and map display.
    </div>

    <div class="demo-field">
        <label class="demo-label">Address</label>
        <upp-address
            formControlName="address"
            placeholder="Enter delivery address..."
            title="Delivery Address">
        </upp-address>
    </div>
</div>

<!-- Live form value -->
<div class="demo-section">
    <h3>Form Value</h3>
    <pre class="form-value-output">{{ formValueJson }}</pre>
</div>

TypeScript

import { Component, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
    selector: 'demo-upp-address',
    templateUrl: './demo-upp-address.html',
    styleUrls: ['../demo-common.scss', './demo-upp-address.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DemoUppAddressComponent implements OnInit {
    form!: FormGroup;

    constructor(private change: ChangeDetectorRef) {
    }

    ngOnInit() {
        this.form = new FormGroup({
            address: new FormControl(null),
        });
    }

    get formValueJson(): string {
        return JSON.stringify(this.form.value, null, 2);
    }
}

SCSS

:host {
    display: block;
    padding: 16px;
}

.demo-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    background: var(--ion-color-warning-tint, #fff3cd);
    color: var(--ion-color-warning-shade, #856404);
    border-radius: 6px;
    font-size: 13px;

    ion-icon {
        font-size: 18px;
        flex-shrink: 0;
    }
}

.form-value-output {
    margin: 0;
    padding: 12px;
    background: var(--ion-color-light, #f4f5f8);
    border-radius: 6px;
    font-size: 12px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--ion-color-dark, #333);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

API Reference

UppAddressComponent

Selector: upp-address

Inputs

Property	Type	Default	Description
formControlName	string	''	Binds the component to a reactive form control via ControlValueAccessor.
placeholder	string	''	Placeholder text shown when no address is set.
title	string	''	Title displayed above the input when an address is selected. Also passed to the modal.
auto	boolean	false	When true, the address picker modal opens automatically after view init.
errornfo	ErrorInfo	{}	Mapping of error keys to human-readable messages, forwarded to the error component.
value	string | MapAddress | null	null	Two-way accessor. Reading returns the current MapAddress or string; writing updates the internal value and triggers change callbacks.

Outputs

Property	Type	Description
Changed	EventEmitter<MapAddress | null>	Fires when the address value changes (after modal selection or programmatic update).

UppMdAddressComponent (Modal)

Selector: upp-modal-address

Opened programmatically by UppAddressComponent.showPicker(). Provides:

• A reactive form with address, number, door, and locality fields.
• A Google Map that displays the resolved position and allows click-to-move.
• Locate button -- uses browser geolocation to resolve the current position.
• Validate button -- geocodes the form fields to confirm and refine the address.
• Returns the full MapAddress on accept, or null on dismiss.

Inputs

Property	Type	Description
title	string	Modal title.
value	string | MapAddress | null	Initial address. If a MapAddress is provided, the form and map are pre-populated. If a string, it is geocoded on init.

MapAddress Interface

interface MapAddress {
    formatted: string;
    address: string;
    number: string;
    door: string | null;
    locality: string;
    timezone: string;
    street: string;
    zipcode: string;
    town: string;
    province: string;
    country: string;
    accuracy: number;
    latitude: number;
    longitude: number;
}