Fixing contry selection

src/app/accountInfo/accountInfo.component.html

@@ -30,13 +30,17 @@
             </mat-form-field>
             <mat-form-field class="app-field-padding">
               <input matInput placeholder="Country" [matAutocomplete]="auto" name="country" #countryVal="ngModel"
-                [(ngModel)]="country" (ngModelChange)="getCountries(country)" autocomplete="new-password" />
+                [(ngModel)]="country" (ngModelChange)="getCountries(country)" (blur)="selectCountryOption($event)" />
+
             </mat-form-field>
             <mat-autocomplete #auto="matAutocomplete">
               <mat-option *ngFor="let country of countries" [value]="country">
                 {{ country }}
               </mat-option>
             </mat-autocomplete>
+            <mat-error class="mat-body" *ngIf="countryErr">
+              Invalid country. Please select a country from the provided list.
+            </mat-error>
           </div>
           <div class="column" *ngIf="!editMode">
             <mat-form-field class="app-field-padding">
@@ -156,7 +160,8 @@
     </div>
 
     <div style="text-align: Center">
-      <button mat-raised-button color="accent" [disabled]="f.invalid || mainContact <= 0 || noEffectCheckbox==false">
+      <button mat-raised-button color="accent"
+        [disabled]="f.invalid || countryErr || mainContact <= 0 || noEffectCheckbox==false">
         Save
       </button>
       <button mat-raised-button style="margin-left: 5px" routerLink="">

src/app/accountInfo/accountInfo.component.ts

@@ -14,14 +14,11 @@ import { MatDialog } from "@angular/material/dialog";
 import { ContactDialogModalComponent } from "../contact-dialog-modal/contact-dialog-modal.component";
 import { MatTableDataSource } from "@angular/material";
 import { UtilService } from "../util/Util-services";
-import { getLocaleDayNames } from "@angular/common";
-import { mergeMap, catchError } from "rxjs/operators";
 import { Router, ActivatedRoute } from "@angular/router";
 import { WebinAuthenticationService } from "../webin-authentication.service";
 import { Compiler } from "@angular/core";
 import { ResetPasswordRequestDialogComponent } from "../reset-password-request-dialog/reset-password-request-dialog.component";
 import { NonSubmissionResultDialogComponent } from "../non-submission-result-dialog/non-submission-result-dialog.component";
-import { HttpErrorResponse } from "@angular/common/http";
 
 @Component({
   selector: "app-main",
@@ -50,6 +47,7 @@ export class AccountInfoComponent {
   metagenomeSubmitter = false;
   metagenomicsConsented = false;
   noEffectCheckbox = false;
+  countryErr = false;
 
   /* Used for storing added emails, this will be used for validation */
   emails = [];
@@ -293,4 +291,11 @@ export class AccountInfoComponent {
       data: { resetObj: obj },
     });
   }
+
+  selectCountryOption(event: any): void {
+    this.countryErr = false;
+    if (event.target.value != "" && this.countries.indexOf(event.target.value) === -1) {
+      this.countryErr = true;
+    }
+  }
 }