Überarbeitung

bizmatch/src/app/components/validated-city/validated-city.component.html

@@ -1,5 +1,5 @@
 <div>
-  <label for="type" class="block text-sm font-bold text-gray-700 mb-1 relative w-fit"
+  <label for="type" class="block text-sm font-bold text-gray-700 mb-1 relative w-fit {{ labelClasses }}"
     >{{ label }} @if(validationMessage){
     <div
       attr.data-tooltip-target="tooltip-{{ name }}"
@@ -19,11 +19,11 @@
     [loading]="cityLoading"
     typeToSearchText="Please enter 2 or more characters"
     [typeahead]="cityInput$"
-    ngModel="{{ value?.city }} {{ value ? '-' : '' }} {{ value?.state }}"
+    ngModel="{{ value?.name }} {{ value ? '-' : '' }} {{ value?.state }}"
     (ngModelChange)="onInputChange($event)"
   >
     @for (city of cities$ | async; track city.id) {
-    <ng-option [value]="city">{{ city.city }} - {{ city.state }}</ng-option>
+    <ng-option [value]="city">{{ city.name }} - {{ city.state }}</ng-option>
     }
   </ng-select>
 </div>

bizmatch/src/app/components/validated-city/validated-city.component.scss

@@ -1,7 +1,7 @@
 :host ::ng-deep .ng-select.custom .ng-select-container {
   //   --tw-bg-opacity: 1;
   //   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-  height: 42px;
+  // height: 42px;
   border-radius: 0.5rem;
   .ng-value-container .ng-input {
     top: 10px;

bizmatch/src/app/components/validated-city/validated-city.component.ts

@@ -27,6 +27,8 @@ import { ValidationMessagesService } from '../validation-messages.service';
 })
 export class ValidatedCityComponent extends BaseInputComponent {
   @Input() items;
+  @Input() labelClasses: string;
+  @Input() state: string;
   cities$: Observable<GeoResult[]>;
   cityInput$ = new Subject<string>();
   countyInput$ = new Subject<string>();
@@ -50,7 +52,7 @@ export class ValidatedCityComponent extends BaseInputComponent {
         distinctUntilChanged(),
         tap(() => (this.cityLoading = true)),
         switchMap(term =>
-          this.geoService.findCitiesStartingWith(term).pipe(
+          this.geoService.findCitiesStartingWith(term, this.state).pipe(
             catchError(() => of([])), // empty list on error
             // map(cities => cities.map(city => city.city)), // transform the list of objects to a list of city names
             tap(() => (this.cityLoading = false)),