title: Call different services in one submit button with angular5
body: <p>I'm creating a form in which I want to make a call of 3 services on submit in angular5 depending on selected values in the dropdown form menu.</p>
  
  <p>I have 3 options in my dropdown list, if the user chooses one value from any list and clicks on the submit button, it will display the results that correspond to the selected value. </p>
  
  <p>I have only one submit button in the form, in which I am currently calling one service that displays the results list(s). But suppose I want to add the other two services conditionally?</p>
  
  <p>Can anybody help me on this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>        findUsersByName(type : string): Observable&lt;any[]&gt; {
          const names = this._userUrl;
          const headers = new Headers();
          headers.append('Content-Type', 'application/json');
          headers.append('Access-Control-Allow-Headers', 'Content-Type, Accept');
          headers.append('Cache-control', 'no-store');
          headers.append('Expires', '0');
          headers.append('Pragma', 'no-cache');
          return this.http.get(names, { headers })
              .map((res: Response) =&gt;
                  res.json());
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    findAll(): Observable&lt;any[]&gt; {
          const userUrl = this._userUrl;
          const headers = new Headers();
          headers.append('Content-Type', 'application/json');
          headers.append('Access-Control-Allow-Headers', 'Content-Type, Accept');
          headers.append('Cache-control', 'no-store');
          headers.append('Expires', '0');
          headers.append('Pragma', 'no-cache');
          return this.http.get(userUrl, { headers })
              .map((res: Response) =&gt;
                  res.json());
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  onSubmit(searchFormValue, formModel): void {
      if (this.isValid(searchFormValue)) {
        if (searchFormValue === searchFormValue.SelectedUser) {
        }
        let user = {
          name: searchFormValue.selectedUseryName,
          code: searchFormValue.selectedUserCode,
          role: searchFormValue.selectedUserRole
        }
        this.onSearch.emit(user);
        this.errorMessage = '';
      }
      this.searchForm.patchValue({
        'selectedUserName' : formModel.name,
        'selectedUserCode' : formModel.code,
        'selectedUserRole' : formModel.role
  
      })
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>      &lt;form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-xs-2"&gt;
              &lt;p-dropdown [options]="users" (onChange)="onNameChange($event.value)" filter="filter" name ="name" placeholder="name"
                [style]="{'width':'100%'}" [formControl]="searchForm.controls['selectedName']"&gt;
              &lt;/p-dropdown&gt;
            &lt;/div&gt;
            &lt;div class="col-xs-2" id="type-filter-search"&gt;
              &lt;p-dropdown [options]="users" filter="filter" (onChange)="onRoleChange($event.value)" name ="role" placeholder="role"
                [style]="{'width':'100%'}" [formControl]="searchForm.controls['selectedRole']"&gt;
  
              &lt;/p-dropdown&gt;
            &lt;/div&gt;
            &lt;div class="col-xs-2"&gt;
              &lt;p-dropdown [options]="users" filter="filter" (onChange)="onCodeChange($event.value)" name ="code"  placeholder="code"
                [style]="{'width':'100%'}" [formControl]="searchForm.controls['selectedCode']"&gt;
              &lt;/p-dropdown&gt;
            &lt;/div&gt;
          &lt;/div&gt; &lt;br&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-xs-12"&gt;
              &lt;button type="submit" class="btn btn-primary pull-right" id="submit-button-filter-search"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;Search &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>