Отправить данные формы с выбранным раскрывающимся списком

Я хочу обновить данные формы, когда я обновляю раскрывающийся список выберите и нажмите кнопку отправки. Я попытался реализовать это:

Конструктор:

export class Contract {
  constructor(
    public id: string,
    public enabled: boolean,
    public name: string,
    public merchant_id: number,    
    public gateway: string,
    public descriptor: string
  ) {}
}

Услуга:

@Injectable({
  providedIn: 'root'
})
export class ContractService {

  constructor(private http: HttpClient) {
  }

  search(filter: ContractFilter, page: number, size: number): Observable<PagedResult<Contract>> {
    let params = this.buildFilterParams(filter);
    let pagedFilter = HttpUtils.appendPageParams(params, page, size);

    return this.http.get<PagedResult<Contract>>(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<Contract> {
    return this.http.get<Contract>(environment.api.urls.contracts.get(contractId));
  }

  export() {
    return this.http.get(environment.api.urls.contracts.export,  { responseType: 'blob' });
  }
}

Составная часть:

@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 => {
        if (params['id']) {
          return this.contractService.get(params['id']);
        } else {
          return of(null);
        }
      })
    ).subscribe(value => {
      if (value != null) {
        this.contract = value;
        this.edit = true;
      }
    });

    this.merchantService.getMerchantsList()
     .subscribe(value => {
        if (value != null) {
          this.merchants = value;
        }
    });
  }

  clear() {
    this.contract.name = null;
  }

  submit() {
    if (this.edit) {
      this.contractService.persist(this.contract).subscribe(() => {
        this.router.navigate(['panel', 'contracts', 'list']);
      })
    } else {
      this.contractService.save(this.contract).subscribe(() => {
          this.router.navigate(['panel', 'contracts', 'list']);
        },
        error => this.handleError(error.error));
    }
  }

  handleError(error: string) {
    if (error === 'TRANSACTION_EXISTS') {
      this.valueExists = true;
    }
  }
}

HTML код:

<h1 class = "title">New Contract</h1>

<form class = "grid-wrapper" #f = "ngForm">
  <div *ngIf = "edit" class = "form-group id">
    <label for = "id">Transaction ID</label>
    <input id = "id" type = "text" name = "id" class = "form-control" disabled [(ngModel)] = "contract.id">
  </div>

  <div class = "form-group name">
    <label for = "name">Contract name</label>
    <input id = "name" type = "text" name = "name" class = "form-control" required [(ngModel)] = "contract.name">
  </div>

  <div class = "form-group type">
    <div class = "input-group-prepend">
      <label for = "type">Merchant</label>
    </div>
    <select class = "custom-select" name = "type" [(ngModel)] = "contract.merchant_id" id = "merchant_id" required>
      <option selected>Please Select...</option>
      <option [value] = "merchant.id" *ngFor = "let merchant of merchants">{{ merchant.name }}</option>
    </select>
  </div>

  <div class = "btn-row">
    <button class = "btn btn-primary" [disabled] = "f.invalid" (click) = "submit()">Submit</button>
    <button class = "btn btn-secondary" (click) = "clear()">Clear</button>
  </div>

</form>

Строки в поле ввода обновляются, но я не могу понять, почему, когда я выбираю другое значение из раскрывающегося списка, оно не обновляется.

Можете ли вы дать мне совет, в чем я ошибаюсь?