display add button for research by resolver

client/src/app/instance/cone-search/components/cone-search.component.ts

@@ -7,11 +7,13 @@
  * file that was distributed with this source code.
  */
 
-import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { IfStmt } from '@angular/compiler';
+import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges, OnInit } from '@angular/core';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
 
 import { ConeSearch, Resolver } from 'src/app/instance/store/models';
 import { nanValidator, rangeValidator } from '../validators';
+import { pairwise, startWith } from 'rxjs/operators';
 
 /**
  * @class
@@ -23,7 +25,8 @@ import { nanValidator, rangeValidator } from '../validators';
     selector: 'app-cone-search',
     templateUrl: 'cone-search.component.html'
 })
-export class ConeSearchComponent implements OnChanges {
+export class ConeSearchComponent implements OnChanges, OnInit {
+
     @Input() coneSearch: ConeSearch;
     @Input() resolver: Resolver;
     @Input() resolverIsLoading: boolean;
@@ -45,12 +48,21 @@ export class ConeSearchComponent implements OnChanges {
         }),
         radius: new FormControl(2, [Validators.required, rangeValidator(0, 150, 'Radius')])
     });
-
+    public formIsInValid: boolean = this.form.invalid;
     public unit = 'degree';
+    ngOnInit(): void {
+
+       this.form.statusChanges.subscribe(
+        status =>{
+            this.formIsInValid = status === 'INVALID'? true: false;
+        }
+       )
+    }
 
     ngOnChanges(changes: SimpleChanges): void {
         if (changes.resolver && changes.resolver.currentValue) {
             this.unit = 'degree';
+
         }
 
         if (changes.coneSearch && !changes.coneSearch.currentValue) {
@@ -68,8 +80,16 @@ export class ConeSearchComponent implements OnChanges {
             this.form.patchValue(this.coneSearch);
             this.form.disable();
         }
+        // update formIsValid when resolver is loaded
+
+        if (changes.resolverIsLoaded && changes.resolverIsLoaded.currentValue) {
+
+            this.formIsInValid = !changes.resolverIsLoaded.currentValue;
+
+        }
     }
 
+
     /**
      * Returns cone-search from form.
      *

client/src/app/instance/search/components/criteria/cone-search-tab.component.html

@@ -23,7 +23,7 @@
                 </app-cone-search>
             </div>
             <div class="col-2 text-center align-self-end">
-                <button class="btn btn-outline-success" *ngIf="!coneSearch" [hidden]="cs.form.invalid" (click)="addConeSearch.emit(cs.getConeSearch())">
+                <button class="btn btn-outline-success" *ngIf="!coneSearch" [hidden]="cs.formIsInValid" (click)="addConeSearch.emit(cs.getConeSearch())">
                     <span class="fas fa-plus fa-fw"></span>
                 </button>
                 <button class="btn btn-outline-danger" *ngIf="coneSearch" (click)="deleteConeSearch.emit()">