siteform.component.html

<form id="siteForm" [formGroup]="siteForm" (ngSubmit)="onFormSubmit()">

    <div class="form-row">
        <div class="form-group col-lg-6 col-md-12 half">
            <h5>Informations</h5>
            <label for="counting">*Type de site&nbsp;</label>
            <select
                type="text"
                formControlName="id_type"
                class="form-control"
                *ngIf="program"
                [value]="site_types.length == 1 ? site_types[0].value : none"
            >
                <option
                    *ngFor="let t of program.features[0].site_types"
                    [value]="t.value"
                >
                    {{ t.text }}
                </option>
            </select>
            <label for="counting">*Nom du site&nbsp;</label>
            <input type="text" formControlName="name" class="form-control" />
        </div>
        <div class="form-group col-lg-6 col-md-12 half">
            <h5>Où est-il situé ?</h5>
            <div class="position-relative">
                <div class="zoom-alert" *ngIf="hasZoomAlert">
                    <div class="mb-2 text-center" i18n="Zooming instruction@@zoomingInstruction">
                        Veuillez zoomer pour localiser votre observation.<br />
                        <span
                            >(zoom min:
                            {{ MainConfig.ZOOM_LEVEL_RELEVE }})</span
                        >
                    </div>
                    <button class="btn" (click)="hasZoomAlert = false">
                        OK
                    </button>
                </div>
                <div
                    id="formMap"
                    class="col-lg-12"
                    [class.ng-invalid]="siteForm.get('geometry').invalid"
                    [class.ng-valid]="siteForm.get('geometry').valid"
                    i18n-data-observation-zoom-statement-warning="Zooming warning@@zoomingWarning"
                    data-observation-zoom-statement-warning="Veuillez zoomer pour localiser votre observation."
                ></div>
            </div>
            <input
                formControlName="geometry"
                type="hidden"
                id="geometry"
                name="geometry"
                #geometry
                class="col-lg-12"
            />
        </div>
    </div>
    <!-- <div class="alert alert-primary rounded-0" role="alert">
      <pre>{{ siteForm.value | json }}</pre>
    </div> -->
</form>