title: Submit form data with selected drop down
body: <p>I want to update form data when I update select drop down and click submit button. I tried to implement this:</p>
  
  <p>Constructor:</p>
  
  <pre><code>export class Contract {
    constructor(
      public id: string,
      public enabled: boolean,
      public name: string,
      public merchant_id: number,    
      public gateway: string,
      public descriptor: string
    ) {}
  }
  </code></pre>
  
  <p>Service:</p>
  
  <pre><code>@Injectable({
    providedIn: 'root'
  })
  export class ContractService {
  
    constructor(private http: HttpClient) {
    }
  
    search(filter: ContractFilter, page: number, size: number): Observable&lt;PagedResult&lt;Contract&gt;&gt; {
      let params = this.buildFilterParams(filter);
      let pagedFilter = HttpUtils.appendPageParams(params, page, size);
  
      return this.http.get&lt;PagedResult&lt;Contract&gt;&gt;(environment.api.urls.contracts.base, {params: pagedFilter});
    }
  
    private buildFilterParams(filter: ContractFilter): HttpParams {
      let params = new HttpParams();
  
      if (filter.name) {
        params = params.append('name', filter.name);
      }
      if (filter.id) {
        params = params.append('id', filter.id);
      }
  
      if (filter.from) {
        params = params.append('from', DateUtil.offsetDate(filter.from.toISOString()));
      }
  
      if (filter.to) {
        params = params.append('to', DateUtil.offsetDate(filter.to.toISOString()));
      }
      return params;
    }
  
    save(contract: Contract) {
      return this.http.post(environment.api.urls.contracts.base, contract);
    }
  
    persist(contract: Contract) {
      return this.http.post(environment.api.urls.contracts.persist(contract.id), contract);
    }
  
    get(contractId: string): Observable&lt;Contract&gt; {
      return this.http.get&lt;Contract&gt;(environment.api.urls.contracts.get(contractId));
    }
  
    export() {
      return this.http.get(environment.api.urls.contracts.export,  { responseType: 'blob' });
    }
  }
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code>@Component({
    selector: 'app-contract',
    templateUrl: './contract.component.html',
    styleUrls: ['./contract.component.scss']
  })
  export class ContractComponent implements OnInit {
  
    contract: Contract = new Contract(null, null, null, null, null);
    merchants: MerchantList[];
  
    edit = false;
  
    valueExists = false;
  
    constructor(private contractService: ContractService,
                private merchantService: MerchantService,
                private router: Router,
                private route: ActivatedRoute) {
    }
  
    ngOnInit() {
  
      this.route.params.pipe(
        flatMap(params =&gt; {
          if (params['id']) {
            return this.contractService.get(params['id']);
          } else {
            return of(null);
          }
        })
      ).subscribe(value =&gt; {
        if (value != null) {
          this.contract = value;
          this.edit = true;
        }
      });
  
      this.merchantService.getMerchantsList()
       .subscribe(value =&gt; {
          if (value != null) {
            this.merchants = value;
          }
      });
    }
  
    clear() {
      this.contract.name = null;
    }
  
    submit() {
      if (this.edit) {
        this.contractService.persist(this.contract).subscribe(() =&gt; {
          this.router.navigate(['panel', 'contracts', 'list']);
        })
      } else {
        this.contractService.save(this.contract).subscribe(() =&gt; {
            this.router.navigate(['panel', 'contracts', 'list']);
          },
          error =&gt; this.handleError(error.error));
      }
    }
  
    handleError(error: string) {
      if (error === 'TRANSACTION_EXISTS') {
        this.valueExists = true;
      }
    }
  }
  </code></pre>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;h1 class="title"&gt;New Contract&lt;/h1&gt;
  
  &lt;form class="grid-wrapper" #f="ngForm"&gt;
    &lt;div *ngIf="edit" class="form-group id"&gt;
      &lt;label for="id"&gt;Transaction ID&lt;/label&gt;
      &lt;input id="id" type="text" name="id" class="form-control" disabled [(ngModel)]="contract.id"&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group name"&gt;
      &lt;label for="name"&gt;Contract name&lt;/label&gt;
      &lt;input id="name" type="text" name="name" class="form-control" required [(ngModel)]="contract.name"&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group type"&gt;
      &lt;div class="input-group-prepend"&gt;
        &lt;label for="type"&gt;Merchant&lt;/label&gt;
      &lt;/div&gt;
      &lt;select class="custom-select" name="type" [(ngModel)]="contract.merchant_id" id="merchant_id" required&gt;
        &lt;option selected&gt;Please Select...&lt;/option&gt;
        &lt;option [value]="merchant.id" *ngFor="let merchant of merchants"&gt;{{ merchant.name }}&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  
    &lt;div class="btn-row"&gt;
      &lt;button class="btn btn-primary" [disabled]="f.invalid" (click)="submit()"&gt;Submit&lt;/button&gt;
      &lt;button class="btn btn-secondary" (click)="clear()"&gt;Clear&lt;/button&gt;
    &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>Strings in input field is updated but I can't find why when I select different value from the drop down value it's not updated.</p>
  
  <p>Can you give me some advice where I'm wrong?</p>